반응형

 

  • /* inline-block : div 속성 + 줄바꿈 없음(속성) */
  • /* 활용 : 세로배치 -> 가로배치 디자인 적용하고자 할때 사용 */
  • /* 예) ul - li (block 속성, 세로메뉴) -> 가로메뉴(위의 속성 고려) */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  /* 바깥여백 */
  margin: 20px;
  /* display 속성 */
  display: inline-block;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* 바깥여백 */
  margin: 20px;
  display: inline-block;
}

.box3 {
  width: 100px;
  height: 100px;
  background-color: yellow;
  /* 바깥여백 */
  margin: 20px;
  display: inline-block;
}

  • /* id 선택자 : #변수명{} */
  • /* display : none <-> block (활용 : 드롭다운 메뉴) */
#box{
    background-color: yellow;
    width: 100px;
    height: 100px;
    /* display 속성 */
    /* 화면에서 보이지 않게 만듦 */
    display: none;
}

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] 절대좌표와 상대좌표  (0) 2023.08.11
[CSS] float  (0) 2023.08.10
[CSS] display 속성  (0) 2023.08.09
[CSS] 가상선택자  (0) 2023.08.09
[CSS] 속성선택자 - 특수선택자  (0) 2023.08.09
반응형

문자열을 만들 때에는 두 가지 방법, 문자열 리터럴을 지정하는 방법과 String 클래스의 생성자를 사용해서 만드는 방법이 있다.


변경불가능한 클래스

String 클래스에서는 문자열을 저장하기 위해 문자형 배열 참조변수(char[ ]) value를 인스턴스 변수로 정의해놓고있다.

한번 생성된 String인스턴스가 갖고 있는 문자열은 읽어 올 수 만있고, 변경할 수는 없다.

예를 들어 + 연산자를 이용해서 문자열을 결합하는 경우 인스턴스 내의 문자열이 바뀌는 것이 아니라 새로운 문자열이 담긴 String 인스턴스가 생성되는 것이다.

String str1 = "반가워"; // 문자열 리터럴 "반가워"의 주소가 str1에 저장됨

String str2 = new String("반가워");  // 새로운 String인스턴스를 생성

String str3 = "반가워";  // 문자열 리터럴 "반가워"의 주소가 str3에 저장됨

  • String 클래스의 생성자를 이용한 경우에는 new 연산자에 의해 메모리 할당이 이루어지기 때문에 항상 새로운 String 인스턴스가 생성된다.
  • 문자열 리터럴은 이미 존재하는 것을 재사용하는 것이다.

이 때의 몇가지 시나리오를 확인해보자.

public static void main(String[] args) {

 

// String

// 문자열이라는 데이터를 보관이나 연산할때 사용

// static 영역, 데이터 영역, --> 상수 풀 영역

 

String str1 = "반가워";

String str2 = new String("반가워");

String str3 = "반가워";

 

System.out.println(str1);

System.out.println(str2);

// 시나리오 1

if(str1 == str2) { // str1은 상수풀 영역에, str2는 힙메모리 영역에 있어 주소값이 다름

System.out.println("주소가 같아요");

} else {

System.out.println("주소값이 달라요");

}

 

// 시나리오 2

// 리터럴 방식으로 생성한 문자열은 이미 생성한 값이 똑같다면 새로 만들지 않고 재활용한다.

if(str1 == str3) {

System.out.println("주소 같음");

} else {

System.out.println("주소 다름");

}

System.out.println("=============================");

// 시나리오 3

str3 = "반갑습니다"; // 값을 변경

if(str1 == str3) { //str3의 값을 변경하여 상수 풀 메모리에 새로 생성됨

System.out.println("주소 같음");

} else {

System.out.println("주소 다름");

}

System.out.println("=============================");

// 시나리오 4

// 문자열에 값을 비교하려면 equals를 반드시 사용

if(str1.equals(str2)) { // str1과 str2의 주소값을 비교하는 것이 아닌 문자열을 비교하므로 값은 "반가워"로 같으므로 같은 값입니다가 출력

System.out.println("같은 값입니다.");

} else {

System.out.println("다른 값입니다.");

}

[실행값]

주소값이 달라요

주소 같음

=============================

주소 다름

=============================

같은 값입니다.

반응형

'Java > Java 이론' 카테고리의 다른 글

[JAVA] 참조변수의 형변환  (0) 2023.08.11
[JAVA] 인터페이스(interface)  (0) 2023.08.11
[JAVA] 추상 클래스와 메서드  (0) 2023.08.10
[JAVA] 다형성  (0) 2023.08.10
[JAVA] 객체지향 언어  (0) 2023.08.09
반응형

추상클래스(abstract class) : 미완성 설계도

클래스를 설계도로 비유하면 추상클래스는 미완성 설계도라 볼 수 있다. 클래스가 미완성이라는 것은 멤버의 개수에 관계된 것이 아니라, 단지 미완성 메서드(추상 메서드)를 포함하고 있다는 의미이다.

  • 미완성 설계도이므로 인스턴스를 생성할 수 없다.
  • 미완성 메서드(추상 메서드)를 포함하고 있는 클래스

추상 클래스 사용법은 'abstract'를 붙이기만 하면 된다.


abstract class 클래스이름 {
         ....
}
 추상메서드

메서드는 선언부와 구현부로 구성되어 있다.

선언부만 작성하고 구현부는 작성하지 않은 채로 남겨둔 것이 추상메서드이다.

즉, 설계만 해놓고 실제 수행될 내용은 작성하지 않았기 때문에 미완성 메서드인 것이다.

왜 미완성으로 놔둔 것일까? 그 이유는 메서드의 내용이 상속받는 클래스에 따라 달라질 수 있기 때문에 조상 클래스에서 선언부만 작성해놓고, 주석을 덧붙여 어떤 기능을 수행할 목적으로 작성되었는지 알려주고, 실제 내용은 상속받는 클래스에서 구현하도록 비워두는 것이다.

  • 추상메서드 역시 'abstract'를 앞에 붙여주고, 추상메서드는 구현부가 없으로 괄호 대신 문장의 끝을 알리는 세미콜론(;)을 적어준다.

// 주석을 통해 어떤 기능을 수행할 목적으로 작성하였는지 알려준다.
abstract 리턴타입 메서드이름 ( ) ;

package ch07_1;

 

public abstract class Computer {  // 추상클래스

 

public abstract void display();

public abstract void typing();

public void trunOn() {

System.out.println("전원을 킵니다.");

}

public void turnOff() {

System.out.println("전원을 끕니다");

}

}

package ch07_1;

 

public class DeskTop extends Computer {

 

 

// 추상메서드 -> 구현메서드로 오버라이딩

@Override

public void display() {

System.out.println("모니터로 화면을 보여줍니다.");

 

}

 

@Override

public void typing() {

System.out.println("키보드로 타이핑을 합니다.");

 

}

 

}

반응형

'Java > Java 이론' 카테고리의 다른 글

[JAVA] 인터페이스(interface)  (0) 2023.08.11
[JAVA] String 클래스  (0) 2023.08.10
[JAVA] 다형성  (0) 2023.08.10
[JAVA] 객체지향 언어  (0) 2023.08.09
[JAVA] switch 문  (0) 2023.08.09
반응형

다형성(polymorphism)  : 여러 가지 형태를 가질 수 있는 능력

  • 하나의 코드가 여러 자료형으로 구현되어 실행되는 것
  • 같은 코드에서 여러 다른 실행 결과가 나옴
  • 정보은닉, 상속과 더불어 객체지향 프로그래밍의 가장 큰 특징 중 하나
  • 다형성을 잘 활용하면 유연하고, 확장성있고, 유지보수가 편리한 프로그램을 만들 수 있음

이전까지 인스턴스 타입과 일치하는 타입의 참조변수만을 사용해왔지만

만약 두 클래스가 상속관계라면 다형성을 적용할 수 있다. 즉, 조상 클래스 타입의 참조변수로 자손 클래스의 인스턴스를 참조하는 것도 가능하다.

package ch06;

 

public class Animal {

 

public void makeSound() {

System.out.println("동물이 소리를 내고 있습니다.");

}

 

 

}

package ch06;

 

public class Brid extends Animal{

 

@Override

public void makeSound() {

System.out.println("새가 지저귀고 있습니다.");

}

 

public void fly() {

System.out.println("새가 날아갑니다.");

}

 

}


Bird b = new Brid ( ) ;   // 참조 변수와 인스턴스의 타입이 일치
Animal a = new Brid ( ); // 조상 타입(Animal) 참조 변수로 자손타입(Bird) 인스턴스 참조

Animal 타입의 참조변수로는 Bird 인스턴스 중에서 Animal 클래스의 멤버들(상속받은 멤버포함)만 사용할 수 있다.

따라서 생성된 Bird 인스턴스 멤버 중에서 Animal 클래스에 정의되지 않은 멤버 fly( )은 참조변수 a로 사용이 불가능하다.

즉, a.fly( )와 같이 할 수 없다는 것이다.

둘 다 같은 타입의 인스턴스지만 참조변수의 타입에 따라 사용할 수 있는 멤버의 개수가 달라진다.


반대로 자손타입의 참조변수로 조상타입의 인스턴스를 참조할 수 있을까?

정답은 불가능하다 이다.

실제 인스턴스인 Animal의 멤버 개수보다 참조변수 b가 사용할 수 있는 멤버 개수가 더 많기 때문이다.

  • 조상타입의 참조변수로 자손타입의 인스턴스를 참조할 수 없다!
  • 반대로 자손타입의 참조변수로 조상타입의 인스턴스를 참조할 수는 없다
반응형

'Java > Java 이론' 카테고리의 다른 글

[JAVA] String 클래스  (0) 2023.08.10
[JAVA] 추상 클래스와 메서드  (0) 2023.08.10
[JAVA] 객체지향 언어  (0) 2023.08.09
[JAVA] switch 문  (0) 2023.08.09
[JAVA] 상속 (2)  (0) 2023.08.08
반응형
객체지향 언어의 특징을 알아보자

1. 코드의 재사용성이 높다.
새로운 코드를 작성할 때 기존의 코드를 이용하여 쉽게 작성할 수 있다.
2. 코드의 관리가 용이하다.
코드간의 관계를 이용해서 적은 노력으로 쉽게 코드를 변경할 수 있다.
3. 신뢰성이 높은 프로그래밍을 가능하게 한다.
제어자와 메서드를 이용해서 데이터를 보호하고 올바른 값을 유지하도록 하며,
코드의 중복을 제거하여 코드의 불일치로 인한 오동작을 방지할 수 있다.
 클래스와 객체

클래스란 객체를 정의해놓은 것, 설계도 또는 틀 이라고 정의할 수 있다.

클래스는 객체를 생성하는데 사용되고, 객체는 클래스에 정의된 대로 생성된다.

 

객체란 실제로 존재하는 것을 의미한다.

예를 들어 휴대폰, 노트북, 책상, 의자 등등.... 같은 사물들이 객체라고 한다. 

사물과 같은 유형적인 것뿐만 아니라 개념이나 논리와 같은 무형의 것도 객체로 간주한다.

 

객체의 속성과 기능

객체는 속성과 기능의 두 종류의 구성요소로 이루어져 있으며, 일반적으로 객체는 다수의 속성과 기능을 갖는다.

객체는 속성과 기능의 집합이라 볼 수 있다.

클래스란 객체를 정의한 것이므로, 클래스에 정의된 속성과 기능을 가진 객체가 만들어지는 것이다.

이해하기 쉽게 예를 들어 휴대폰을 생각해보자.

휴대폰의 속성으로는 전원상태, 색상, 길이, 크기 등이 있으며, 기능으로는 전화걸기, 문자보내기, 볼륨 높이기 등이 있다.

 

객체지향 프로그래밍에서는 속성과 기능을 각각 변수, 메서드로 표현한다.

 

속성(property) ---> 멤버변수(variable)

기능(function) ---> 메서드(method)

 

한 파일에 여러 클래스 작성하기

하나의 소스파일에 하나의 클래스만을 정의하는 것이 보통, 하나의 소스파일에 둘 이상의 클래스를 정의하는 것도 가능하다. 이 때 주의해야 할 사항이 있는데, 소스파일의 이름은 public class의 이름과 일치해야한다는 것이다.

만일 소스파일 내에 public class가 없다면, 소스파일의 이름은 소스파일 내의 어떤 클래스 이름으로 해도 상관없다.

 

올바른 작성예시
Hello2.java
---------------------------------------
public class Hello2 { }
           class Hello3 { }
---------------------------------------
* public class가 있는 경우, 소스파일의 이름은 반드시 public class의 이름과 일치해야한다.
Hello2.java
---------------------------------------
class Hello2 { }
class Hello3 { }
---------------------------------------
* public class가 하나도 없는 경우, 소스파일의 이름은 Hello2.java / Hello3.java 둘 다 가능하다.
잘못된 작성 예시
Hello2.java
---------------------------------------
public class Hello2 { }
public class Hello3 { }
---------------------------------------
* 하나의 소스파일에 둘 이상의 public class가 존재하면 된다.
각 클래스를 별도의 소스파일에 나눠서 저장하거나 둘 중 한 클래스에 public을 붙이지 않아야 한다.
Hello3.java
---------------------------------------
public class Hello2 { }
           class Hello3 { }
---------------------------------------
* 소스파일의 이름이 public class와 일치하지 않는다. 소스파일의 이름을 Hello2.java로 변경해야한다.
hello2.java
---------------------------------------
public class Hello2 { }
           class Hello3 { }
---------------------------------------
* 소스파일의 이름과 public class의 이름이 일치하지 않는다.
대소문자를 구분하므로 대소문자까지 일치해야 한다.
반응형

'Java > Java 이론' 카테고리의 다른 글

[JAVA] 추상 클래스와 메서드  (0) 2023.08.10
[JAVA] 다형성  (0) 2023.08.10
[JAVA] switch 문  (0) 2023.08.09
[JAVA] 상속 (2)  (0) 2023.08.08
[JAVA] 상속  (0) 2023.08.08
반응형

배열을 어떻게 활용해야 할까?


활용예제 1) 총합과 평균 - 배열의 모든 요소를 더해서 총합과 평균을 구한다.

package ch01;

 

public class Ex5_2 {

 

public static void main(String[] args) {

int sum = 0; // 총합을 저장하기 위한 변수 선언과 초기화

float average = 0f; // 평균을 저장하기 위한 변수 선언과 초기화

 

int[] score = { 100, 88, 100, 100, 90 };

 

for (int i = 0; i < score.length; i++) { // 반복문을 이용해 배열에 저장되어있는 값들을 모두 더한다.

sum += score[i];

}

average = sum / (float) score.length; // 계산결과를 float타입으로 얻기위해 형변환

 

System.out.println("총합 : " + sum);

System.out.println("평균 : " + average);

 

} // end of main

 

} // end of class

 

[결과]

총합 : 478

평균 : 95.6

 

활용예제 2) 최대값과 최소값 - 배열의 요소 중에서 제일 큰 값과 제일 작은 값을 찾는다.

package ch01;

 

public class Ex5_3 {

 

public static void main(String[] args) {

int score[] = { 79, 88, 91, 33, 100, 55, 95 };

 

int max = score[0]; // 배열의 첫 번째 값으로 최대값을 초기화

int min = score[0]; // 배열의 첫 번째 값으로 최소값을 초기화

 

for (int i = 1; i < score.length; i++) { // 배열의 두번째 요소부터 읽기 위해 변수i 값을 1로 초기화

if (score[i] > max) {

max = score[i];

} else if (score[i] < min) {

min = score[i];

}

} // end of for

System.out.println("최대값 : " + max);

System.out.println("최소값 : " + min);

} // end of main

 

} // end of class

 

  • 배열의 첫 번째 요소 'score[0]'의 값으로 최대값을 의미하는 변수 max 최소값을 의미하는 변수 min을 초기화
  • 반복문을 통해 배열의 두 번째 요소 score[1]부터 max와 비교
  • 만일 배열에 담긴 값이 max에 저장된 값보다 크면 이 값을 max에 저장
  • 배열의 마지막까지 비교하고 나면 max에는 배열에 담긴 값 중 가장 큰 값이 저장

[결과]

최대값 : 100

최소값 : 33

 

활용예제 3) 섞기 - 배열의 요소의 순서를 반복해서 바꾼다. (숫자 섞기, 로또 번호 생성)

package ch01;

 

import java.util.Arrays;

 

public class Ex5_4 {

 

public static void main(String[] args) {

int[] numArr = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};

System.out.println(Arrays.toString(numArr));

 

for(int i = 0; i < 100; i++) {

int n = (int)(Math.random() * 10); // 0~9 중의 한 값을 임의로 받는다.

int tmp = numArr[0];

numArr[0] = numArr[n];

numArr[n] = tmp; // numArr[0]과 numArr[n]의 값을 서로 바꾼다.

}

System.out.println(Arrays.toString(numArr));

 

} // end of main

 

} // end of class

 

  • 만약 random()을 통해 얻은 n값이 3이라면 아래와 같다.

 

package ch01;

 

public class Ex5_5 {

 

public static void main(String[] args) {

// 로또 번호 만들기

 

int[] ball = new int[45]; // 45개의 정수값을 저장하기 위한 배열 생성

 

// 배열의 각 요소에 1~45의 값을 저장

for(int i = 0; i < ball.length; i++) {

ball[i] = i + 1; // ball[0]에 1이 저장됨

}

 

int tmp = 0; // 두 값을 바꾸는데 사용할 임시변수지정

int j = 0; // 임의의 값을 얻어서 저장할 변수

 

// 배열의 i번째 요소와 임의의 요소에 저장된 값을 서로 바꿔서 값을 섞는다.

// 0번째 부터 5번째 요소까지 모두 6개만 바꾼다.

 

for(int i = 0; i < 6; i++) {

j = (int)(Math.random() * 45); // 0 ~ 44 범위의 임의의 값을 얻는다.

tmp = ball[i];

ball[i] = ball[j];

ball[j] = tmp; // ball[i] 와 ball[j]의 값을 서로 바꾼다.

}

 

// 배열 ball의 앞에서부터 6개의 요소를 출력

for(int i = 0; i < 6; i++) {

System.out.printf("ball[%d]=%d%n", i, ball[i]);

}

 

}

 

}

 

반응형
반응형

swith문에 대해 자세히 알아보자!


 

 

  • if 문의 경우 결과가 참, 거짓 두가지 밖에 없다.
  • 경우의 수가 많아 질 수록 else - if를 계속 추가해야해서 복잡하고, 처리시간도 길어진다.
switch 문
  • 단 하나의 조건식으로 많은 경우의 수를 처리
  • 표현도 간결해 알아보기가 쉽다.
  • 처리할 경우의 수가 많은 경우에는 if문 보다 switch문으로 작성하는 것이 좋다.
  • 단, switch문은 제약조건이 있기 때문에, 경우의 수가 많아도 어쩔 수 없이 if문으로 작성해야하는 경우가 있다.
  1. 조건식을 계산한다.
  2. 조건식의 결과와 일치하는 case문으로 이동한다.
  3. 이후의 문장들을 수행한다.
  4. break문이나 switch문의 끝을 만나면 switch문 전체를 빠져나간다.

  • 만약 조건식의 결과와 일치하는 case문이 하나도 없으면 default문으로 이동한다.
  • default문은 if 문의 else블럭과 같은 역할이라 생각하면 된다.
  • switch 문의 break 문은 각 case문의 영역을 구분하는 역할을 한다.
  • 만약 break문을 생략하게 된다면 case문 사이의 구분이 없어지는것과 같아, 다른 break 문을 만나거나 switch문 블럭{ } 끝을 만날때 까지 나오는 모든 문장들을 수행하게 된다.
  • 이러한 실수를 방지하기위해 break문을 빼먹지 않도록 주의해야한다.
switch 문의 제약조건

 

  • switch문의 조건식은 결과값이 반드시 정수이어야 한다.
  • 결과값과 일치하는 case문으로 이동하기 때문에 case문의 값 역시 정수이어야 한다.
  • case문의 값이 중복되지 않아야 한다. // 같은 값의 case문이 여러 개 이면 어디로 이동해야할지 모르기 때문!
  • case문의 값은 반드시 상수이어야 한다. // 변수나 실수는 case문의 값으로 사용할 수 없다!

public static void main(String[] args) {

int num, result;

final int ONE = 1;

 

 

switch (result) {

case '1' : // OK. 문자 리터럴(정수 49와 동일)

case ONE : // OK. 정수 상수

case "YES" : // OK. 문자열 리터럴. JDK 1.7부터 허용

case num : // 에러. 변수는 불가

case 1.0 : // 에러. 실수도 불가

 

}

switch문의 제약조건 예제
예제문은 [JAVA의 정석(기초편)_남궁성 지음] 책을 참고하였습니다.

package ch01;

 

import java.util.Scanner;

 

public class SwitchMainTest {

 

public static void main(String[] args) {

System.out.print("현재 월을 입력하세요.>");

 

Scanner sc = new Scanner(System.in);

 

int month = sc.nextInt(); // 화면을 통해 입력받은 숫자를 month에 지정

 

switch (month) {

case 3:

case 4:

case 5:

System.out.println("현재의 계절은 봄입니다.");

break;

case 6:

case 7:

case 8:

System.out.println("현재의 계절은 여름입니다.");

break;

case 9:

case 10:

case 11:

System.out.println("현재의 계절은 가을입니다.");

break;

default: // case 12: case 1: case 2:

System.out.println("현재의 계절은 겨울입니다.");

 

} // end of switch

 

} // end of main

 

} // end of class

 

* case문은 한 줄에 쓰던, 한 줄에 붙여서 쓰던 상관없음.

만약 예제의 switch 문을 if문으로 변경하면 다음과 같다.

if(month== 3 || month == 4 || month == 5) {

System.out.println("현재의 계절은 봄입니다.");

} else if (month== 6 || month == 7 || month == 8) {

System.out.println("현재의 계절은 여름입니다.");

} else if (month== 9 || month == 10 || month == 11) {

System.out.println("현재의 계절은 가을입니다.");

} else { // month == 12, 1, 2

System.out.println("현재의 계절은 겨울입니다.");

}

반응형

'Java > Java 이론' 카테고리의 다른 글

[JAVA] 다형성  (0) 2023.08.10
[JAVA] 객체지향 언어  (0) 2023.08.09
[JAVA] 상속 (2)  (0) 2023.08.08
[JAVA] 상속  (0) 2023.08.08
[JAVA] 배열  (0) 2023.08.04
반응형
display 속성
block < -> inline 속성 변경가능

 

 

block -> inline 속성 변경

 

 

inline 속성 특징 : width, height 속성무시, 안에 컨텐츠(글)에 따라 크기가 정해짐 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/01_display_div.css">
</head>
<body>
    <div class="box">홍길동</div>
    <div class="box2">홍길동</div>
    <div class="box3">홍길동</div>
</body>
</html>

[CSS]

/* id선택자 : #변수명, class 선택자 : .변수명 ,
* : 전체선택자, 태그선택자 */
/* div의 특징 : 블럭(block)속성 :: 줄바꿈이 발생함.
                블럭속성태그 :: p태그, h1 ~ h6 태그
*/
/* span 특징 : 인라인(inline) 속성, 줄바꿈 없음
                인라인속성 태그 :: input태그, img태그....
*/
 
.box {
  width: 50px;
  height: 50px;
  background-color: blue;
  display: inline;   // inline을 적용하면 가로/세로 크기가 무시됨
}
.box2 {
  width: 50px;
  height: 50px;
  background-color: red;
  display: inline;
}
.box3 {
  width: 50px;
  height: 50px;
  background-color: yellow;
  display: inline;
}

inline -> block 속성변경

 

 

block 속성으로 변경하면 가로/세로크기를 지정할 수 있다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/02_display_span.css">
</head>
<body>
    <span class="box">홍길동</span>
    <span class="box2">홍길동</span>
    <span class="box3">홍길동</span>
</body>
</html>

[CSS]

/* span : inline 속성, width/height 속성 무시, 글만큼 크기가 정해진다. */
.box{
    background-color: blue;
    /* block 속성 지정 */
    display: block;  // block 속성을 적용하면 가로/세로 크기를 지정할 수 있음
    /* 가로크기 */
    width: 50px;
    /* 세로크기 */
    height: 50px;
}

.box2{
    background-color: red;
    display: block;
    width: 50px;
    height: 50px;
}

.box3{
    background-color: yellow;
    display: block;
    width: 50px;
    height: 50px;
}

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] float  (0) 2023.08.10
[CSS] display 속성 (2)  (0) 2023.08.10
[CSS] 가상선택자  (0) 2023.08.09
[CSS] 속성선택자 - 특수선택자  (0) 2023.08.09
[CSS] 인접한 형제 선택자  (0) 2023.08.09
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가상 선택자(같은 태그의 첫번째 태그를 선택)</title>
    <style>
      /* 가상선택자(같은 태그의 첫번째 태그를 선택) */
      img:first-of-type {
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준명명법 : 단어와 단어사이는 -(마이너스, 대쉬)를 붙인다. -->
    <img src="http://placehold.it/300x200" alt="white-blank" />
    <img src="http://placehold.it/300x200" alt="blank b1" />
    <img src="http://placehold.it/300x200" alt="blank b2" />
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가상 선택자(선택한 것의 반대인 것들을 선택)</title>
    <style>
      /* 가상선택자(선택한 것의 반대인 것들을 선택) */
      /* not(:가상선택자) : 반대 */
      img:not(:first-of-type) {
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준명명법 : 단어와 단어사이는 -(마이너스, 대쉬)를 붙인다. -->
    <img src="http://placehold.it/300x200" alt="white-blank" />
    <img src="http://placehold.it/300x200" alt="blank b1" />
    <img src="http://placehold.it/300x200" alt="blank b2" />
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가상 선택자(같은 태그 중 마지막 태그를 선택)</title>
    <style>
      /* 가상선택자(같은 태그 중 마지막 태그를 선택) */
      /* last-of-type : 태그 중 마지막 태그 선택 */
      img:last-of-type {
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준명명법 : 단어와 단어사이는 -(마이너스, 대쉬)를 붙인다. -->
    <img src="http://placehold.it/300x200" alt="white-blank" />
    <img src="http://placehold.it/300x200" alt="blank b1" />
    <img src="http://placehold.it/300x200" alt="blank b2" />
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가상 요소(앞/뒤에 추가하기)</title>
    <style>
      /* 태그의 앞에 content 값 추가하기 */
      p::before {
        content: "😊";
      }
      /* 태그의 뒤에 content 값 추가하기 */
      p::after {
        content: "😎";
      }
    </style>
  </head>
  <body>
    <p>홍길동입니다.</p>
  </body>
</html>

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] display 속성 (2)  (0) 2023.08.10
[CSS] display 속성  (0) 2023.08.09
[CSS] 속성선택자 - 특수선택자  (0) 2023.08.09
[CSS] 인접한 형제 선택자  (0) 2023.08.09
[CSS] 웹 폰트 적용하기  (0) 2023.08.09
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>속성 선택자 - 특수 선택자(포함되는것 : 비슷한 것 선택)</title>
    <style>
      /* 값이 단어인것들을 선택 */
      img[alt~="blank"] {
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
    <img src="http://placehold.it/300x200" alt="white blank" />
    <img src="http://placehold.it/300x200" alt="blank b1" />
    <img src="http://placehold.it/300x200" alt="blank b2" />
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>속성 선택자 - 특수 선택자(문자열을 속성값으로 시작할 경우 선택)</title>
    <style>
      /* 속성의 값이 white 이거나 white-로 시작되는 태그(요소)를 선택 */
      img[alt|="white"] {
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준명명법 : 단어와 단어사이는 -(마이너스, 대쉬)를 붙인다. -->
    <img src="http://placehold.it/300x200" alt="white-blank" />
    <img src="http://placehold.it/300x200" alt="blank b1" />
    <img src="http://placehold.it/300x200" alt="blank b2" />
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>속성 선택자 - 특수 선택자(부분 문자열로 시작하는 것 선택)</title>
    <style>
      /* 부분 문자열로 시작되는 태그(요소)를 선택 */
      /* 코딩 : ^(문자열의 시작을 의미) */
      img[alt^="wh"] {
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준명명법 : 단어와 단어사이는 -(마이너스, 대쉬)를 붙인다. -->
    <img src="http://placehold.it/300x200" alt="white-blank" />
    <img src="http://placehold.it/300x200" alt="blank b1" />
    <img src="http://placehold.it/300x200" alt="blank b2" />
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>속성 선택자 - 특수 선택자(부분 문자열로 끝나는 것 선택)</title>
    <style>
      /* 부분 문자열로 끝나는 태그(요소)를 선택 */
      /* 코딩 : $(문자열의 끝을 의미) */
      img[alt$="1"] {
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준명명법 : 단어와 단어사이는 -(마이너스, 대쉬)를 붙인다. -->
    <img src="http://placehold.it/300x200" alt="white-blank" />
    <img src="http://placehold.it/300x200" alt="blank b1" />
    <img src="http://placehold.it/300x200" alt="blank b2" />
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>속성 선택자 - 특수 선택자(부분 문자열로 포함되는 것)</title>
    <style>
      /* 부분 문자열이 포함되는 태그(요소)를 선택 */
      /* 처음/중간/마지막 전부 모두 선택 됨 */
      /* 코딩 : *(문자열의 끝을 의미) */
      img[alt*="an"] {
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
    <!-- css에서 표준명명법 : 단어와 단어사이는 -(마이너스, 대쉬)를 붙인다. -->
    <img src="http://placehold.it/300x200" alt="white-blank" />
    <img src="http://placehold.it/300x200" alt="blank b1" />
    <img src="http://placehold.it/300x200" alt="blank b2" />
  </body>
</html>


반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] display 속성  (0) 2023.08.09
[CSS] 가상선택자  (0) 2023.08.09
[CSS] 인접한 형제 선택자  (0) 2023.08.09
[CSS] 웹 폰트 적용하기  (0) 2023.08.09
[CSS] Inline Style  (0) 2023.08.09
반응형

형제태그가 다수 존재시 인접한 형제 태그를 선택하여 디자인하는 방법입니다.

사용법
* 형제태그 2 1개만 선택되어 디자인됨
형제태그+형제태그2 {
          속성: 값;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>인접한 형제 선택자</title>
    <style>
        /* css 작성 : 권고하지는 않음 */
        /* 사용법 : 형제태그2 1개만 선택됨
        형제태그+형제태그2 {
            속성: 값;
        }
        */
        h3+p{
            color: red;
        }
    </style>
</head>
<body>
    <h3>인접한 형제 선택자</h3>
    <p>p로 감싸여져 있는 현재 문단은 h3과 인접한 형제간입니다.</p>
    <p>body로 감싸여져 있는 태그는 h3과 인접한 형제간이 아닙니다.</p>
</body>
</html>

위의 예시를 보면

<body> 태그 아래 형제태그가 <h3> <p> <p> 태그가 존재합니다. 이 중 <h3> 태그와 인접한 형제 태그인 <p : 첫번째>를 선택하여 디자인 할 수 있습니다.

 

실행결과

반응형

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] 가상선택자  (0) 2023.08.09
[CSS] 속성선택자 - 특수선택자  (0) 2023.08.09
[CSS] 웹 폰트 적용하기  (0) 2023.08.09
[CSS] Inline Style  (0) 2023.08.09
[CSS] CSS 디자인 우선순위  (0) 2023.08.09
반응형

다음 결과물을 참고하여 CSS 디자인을 해보세요.


h1 - Moirai One 구글 웹폰트 적용
p - Diphylleia 구글 웹폰트 적용 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/23_exam_google_font.css">
</head>
<body>
    <h1>홍길동의 블로그</h1>
    <p>안녕하세요 홍길동입니다.
        홍길동의 블로그 홈페이지에 오신 것을 환영합니다.
    </p>
</body>
</html>


CSS 코드

더보기
h1{
    /* 구글 웹폰트 */
    font-family: 'Moirai One', cursive;
    /* 글자 중앙 정렬 */
    text-align: center;
   
}
p{
    font-family: 'Diphylleia', serif;
    text-align: center;
   
}

 

반응형

'CSS > CSS 실습' 카테고리의 다른 글

[CSS] float 실습예제  (0) 2023.08.10
[CSS] display 실습  (0) 2023.08.10
[CSS] 테이블 스타일 적용  (0) 2023.08.09
[CSS] 배경이미지 연습문제  (0) 2023.08.08
[CSS] Box 연습문제  (0) 2023.08.08

+ Recent posts