[본캠프 8주차] 화요일 TIL

12/10 일일 목표📝

디자인 카타

웹퍼블리싱

 

---

 

 

📖 오늘 배운 내용

 

CSS의 주요 구성 요소

1) 선택자 (Selector) 

• 어떤 HTML 요소에 스타일을 적용할지 지정
• 예: h1, .클래스명, #아이디명 등

2) 속성 (Property) 

• 변경하고 싶은 스타일 항목
• 예: color (색상), font-size (글자 크기), margin (외부 여백)

3) 값 (Value)

• 속성에 적용할 구체적인 값을 지정
• 예: blue, 24px, 10px

4) 선언 (Declaration )

• 속성과 값을 {} 안에 쓴 부분
• 예: { color: blue; font-size: 24px; }

 

CSS 선택자 종류

(1) 태그 선택자

h1 {
      color: red;
}

 

(2) 클래스 선택자 (.클래스명)

.title {
        font-size: 20px;
}

 

(3) 아이디 선택자(#)

#unique-title {
         font-weight: bold;
}

 

 

CSS 적용 방법

(1) 인라인 CSS

HTML 태그에 직접 스타일 적용

<h1 style="color: blue; font-size: 24px;">인라인 스타일</h1>

 

(2) 내부 CSS

<style> 태그 안에 작성

<style>
     h1 {
         color: blue;
}
</style>

 

 

 

폰트변경하는 법

font-family : "폰트이름", "대체 폰트", generic-family 

 

웹폰트 링크를 넣을때는 스타일에 넣으면 안되고 헤드 타이틀 밑에 넣어야함

 

line-height : 줄간격

letter-spacing : 글자 간격

text-transform : 대소문자 변환

 

 

디스플레이 속성

HTML 요소에는 기본적으로 설정된 디스플레이 값이 있음

 

(1) block 블록

• 한줄 전체를 차지하며 다른 요소는 다음 줄로 내려감
• 예 : <div>, <p>, <h1>

(2) inline 인라인 

• 한 줄 안에 다른 요소들과 나란히 배치, 크기 조정 불가능
• 예 : <span>, <a> , <img>

(3) inline-block 인라인 블록

• 인라인처럼 한줄에 나란히 배치되지만 블록처럼 크기 조정 가능

(4) flex 

• 요소들을 유연하게 배치 가능
• 부모요소에 flex를 설정하면 자식 요소가 자동으로 배치됨

 

단순 배치 → block, inline

유연 배치 → flex

 

 

 

연습,,

 

 

 

 

---

 

 

👩‍🏫 오늘 진행하며 어려웠던 부분

어제는 맛보기였다.... 오늘 너무 어려워서 죽는줄 처음에는 이해하기가 어려웠다.. display 속성을 사용하면 요소가 어떻게 배치되고 보일지를 바로 결정할 수 있다는 점에서 신기했지만 그만큼 복잡하기도 했다.

특히 block, inline, inline-block의 차이를 명확히 이해하는 데 시간이 좀 걸렸다.. 지금 til 정리하면서 다시 보니까 조금 이해간것도 같고 사실아직 백프로 이해하기는 어려운듯🤯

 

 

---

 

👀 어려웠던 부분을 어떻게 해결했을까?

 

오늘 배운 내용을 이해하기 위해 과제를 하면서 직접 만들어보니 설명만 듣고 해보았을 때 보다는 조금씩 감이 잡히기 시작한 것 같다. CSS의 레이아웃 설계가 단순히 스타일만 적용하는 것 이상의 의미를 가진다는 걸 깨달았다. 주의 할 점도 많고 하나 안넣었다고 오류라니.....머리아프지만 앞으로도  많은 연습이 필요하겠다는 생각이 들었다.

오늘 배운 내용을 복습하면서 부족한 부분을 다시 한 번 점검해야겠다. 내일은 어떤 내용을 배울지 두근거리지만 걱정이 앞서네.......😊