008_CSS와 스타일

Jan 19, 2024

Contents

CSS (Caseading Style Sheets)

CSS는 html을 디자인 하는 것이다.

html은 문서를 구조화 하는 것이다. → html을 쭉 늘여 놓으면 스타일 없는 문서가 된다.

CSS는 무조건 “head”라는 태그 안에 넣어야 한다.

CSS 사용 예시

코드의 형태(이미지)

결과

태그 고유 특징

태그마다 태그의 고유 값을 가진다.

위의 그림의 margin → 바깥 테두리, border → 중간 테두리, padding → 내부 테두리, div → 실제 물체 이 박스의 높이는 60이다 (바깥부터 margin, border, pdding, div 순 이다.)

☝

정리

css를 배울 때 태그마다 고유한 디자인 속성들이 있다.(자기가 가지고 있는) margin, padding 같은 고유의 값을 가지는지 확인하면서 진행한다.

예상하지 못한 margin과 padding 값이 있을때 디자인에 문제가 생길수 있는데 이를 무력화 시키고 디자인하면 좋다.

모든 태그의 속성을 무력화 시키고 진행할것이다.

TIP

☝

알고 있으면 좋은 정보 1. border의 dotted는 점선이다. solid는 실선이다. 2. block → 가로는 최대 세로는 설정한 사이즈, inline → 가로 세로 모두 내용물 크기 3. 사이즈를 지정해서 만들고 싶을 때는 inline-block 을 사용한다. → inline-block은 크기를 지정할 수 있는 block만 쓴 것과 다르게 한 줄 전체를 먹는 것이 아니기 때문에 디자인에 더욱 용이하다. 4. css → 선택자, 속성, 값 3개의 요소가 있다

☝

CDN(Content Delivery Network)이란? (중요하지는 않음) → CDN을 쓰면 내 서버가 CSS 파일을 들고 있지 않아도 된다. 서버를 한 군데에 두는 것이 아닌 세계 여러 군데에 두고 위의 상황이 가능하게 된다. 한 군데만 두면 거리와 트래픽에 의해 엄청 느리지만 여러 군데 두면 해결이 가능하다. 내 서버에 정적 파일을 안 둬도 된다. CLOUD FLARE → 정적 파일을 모아두는 CDN이다.