S1U5 CSS 기초

* 공부할때 참고 하기 좋은 사이트 : https://www.hmmhmm.hm/

* 개념 정리 하기 좋은 사이트 : https://ofcourse.kr/js-course/%EB%AC%B8%EC%9E%90%ED%98%95-%EB%B3%80%EC%88%98

 

1. 현재 기분이나 느낌

멀리 가야한다. 마라톤이다. 종합퀴즈 10문제 다맞히니 기분이가 좋다.

오늘은 뭔가 제대로 공부한 느낌? ㅋ  내일은 페어 매칭이니 긴장된다.

틀려도 좋다~ 삽질하자~ 틀린만큼 머리에 남는다!! 삽질 환영!!

 

2. 이해도 자가 점검 리스트

Chapter1. CSS 기초

• CSS의 사용 목적을 이해한다.(o)
• CSS의 기본 문법과 구조를 이해한다.(o)
• CSS를 HTML에 적용하는 방법에 대해서 이해한다.(o)
• HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.(o)
• CSS를 이용해 텍스트를 꾸밀 수 있다.(o)
• CSS에서 쓰이는 단위를 기억하고, 각 단위가 적합한 경우를 구분할 수 있다.(o)
• MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.(o)

Chapter2. 박스모델

• CSS 박스 모델을 이해할 수 있다.(o)
• 박스를 구성하는 네 가지 요소를 구분하고 각각에 대해 설명할 수 있다.(o)
  • margin, border, padding, content
• 박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다.(o)

Chapter3. CSS selector

• 다양한 CSS selector 규칙을 이해한다.(o)
• 후손 selector와 자식 selector의 차이를 이해한다.(o)
• 필요시 검색을 통해 필요한 selector를 찾아 적용할 수 있다.(o)

 

3. 학습한 내용중 떠오르는 것

• 위 CSS 예제에서 등장하는 속성은 어떤 것들이 있나요?
  • 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요? text-align: center;
  • 글자 색을 바꾸기 위한 속성은 무엇인가요?- color
  • 배경 색을 바꾸기 위한 속성은 무엇인가요? - background-color
  • background 속성과 background-color 속성은 어떻게 다른가요? - 백그라운드는 컬러만 지정가능, 백그라운드 컬러는 속성(color/image/repeat/attachment/position 등) 속성 부여가능
  • em의 의미는 무엇인가요? - 상대적 폰트크기

color / image / repeat / attachment / position과 background 옵션을 추가적으로 부여

 

CSS 파일을 HTML 파일에 연결할 때는, <link> 태그 안에서 href 속성을 통해 파일을 연결합니다.

1
<link rel="stylesheet" href="index.css" />

[코드] link 태그와 link 태그의 속성

 

<link> 요소는 HTML 파일과 다른 파일을 연결하는 목적으로 사용합니다. <link> 요소의 rel 은 연결하고자 하는 파일의 역할이나 특징을 나타냅니다. CSS(Cascading Style Sheet)는 stylesheet이므로 rel 속성에 stylesheet 를 추가합니다. href 속성에는 파일의 위치를 추가해야 합니다. 지금 작성한 두 파일은 한 폴더 내에 있으므로 파일 이름만 입력합니다. 다른 폴더에 파일이 존재하는 경우, 절대 경로 또는 상대 경로를 입력해 원하는 파일을 찾아 연결할 수 있습니다.

 

* id와 class의 차이점

id                                                                                                 class

#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용	스타일의 분류(classification)에 사용

• 절대 단위: px, pt 등
• 상대 단위: %, em, rem(추천), ch, vw, vh 등

[그림] HTML 문서의 레이아웃

 

줄 바꿈이 되는 요소: <h1>, <p>

줄 바꿈이 되지 않는 요소: <span>

block 요소의 대표적인 예는 <div>, <p> 입니다.

inline 요소의 대표적인 예는 <span>입니다.

 

줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음	줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	가능	가능	불가능

[표] block, inline-block, inline의 특징

 

 

4. 설명하기 어려운 단어가 있다면 왜 그런지?

 

 

 

5. 추가로 알아야하는 것, tip

 

프론트엔드 개발자가 되려면 

• 컴포넌트 기능별로 묶어서 제작
• 화면의 구성이나 배치 (레이아웃 디자인)
• 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등

그리고 아래의 내용은 프론트엔드 개발자에게 있으면 좋고, 없어도 크게 상관없는 부분.

• 정렬이나 배색에 대한 감각
• UX에 대하여 고민해 보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험

vsc 주석 설정해제 : cmd+/

! + tab : 자동완성

<div></div> : div + tab, 10개만드려면 div * 10

같은코드 class 10개만드려면 : div.code*10 +tab

cmd + shift + L : 원하는 코드 드래그후 전부 선택됨

cmd + d : 원하는 부분만 선택됨

opt + alt + 방향키 : 한줄 위아래로 이동