[생활코딩 WEB2 CSS] 강의 정리노트

1.  CSS의 등장 

html이 생긴 후 웹페이지를 아름답게 꾸미고 싶어짐

html에 디자인 관련 태그를 생성할 때 생기는 문제: 코드에서 웹페이지에 대한 정보와 정보가 아닌 디자인에 대한 코드가 섞이게 됨 - 정보로서의 가치 떨어진다

css - 디자인에 최적화된 언어 

장점: html 태그를 중복해서 써야할 것을 한번에 해결해줌 (중복의 제거) /  코드의 가독성 증가 

 

<style> </style> 

이 안에 css코드 작성 

html이 아닌 css로 해석하라는 명령

이렇게 하면 html은 정보에만 전념할 수 있다 - 정보만 보고 싶은 사람은 이 태그 안에 있는 내용은 무시하면 되니까

 

2. CSS 기본 문법

주석처리:  / **/  

(html 주석처리는 <!-- -->)

 

웹페이지 안에 css를 사용하는 두가지 방법 

1. style 태그를 쓴다   <style> </style> (head 태그안에)

2. (style) 속성을 쓴다 style = 

 

 

이론 정리:

property = 속성

value = 값

 

각 효과를 지정하고 나서 세미콜론 필수

 

줄 나눈 이유: 구분하기 편하려고, 밑에 사진처럼 다 한줄로 써도 상관없다.

 

Property (속성)

- 모든 태그는 암기하는 게 아니라 원하는 걸 검색!

Property : property value	적용 효과
color: 원하는 색깔	글씨에 색깔 넣기
text-decoration: none	하이퍼링크 밑줄제거
text-align:center	중앙정렬
font-size: (large,medium,small) (40px,50px,60px ..) (100%, 150%..)	글씨 크기 조절
border: (숫자)px , color, solid	테두리 설정 - 두께, 색깔, 실선
display:inline / display:block	블록이나 인라인으로 태그를 바꿈
paading: (숫자) px	테두리와 내용 사이 공간 생성
margin: (숫자)px	테두리와 테두리 사이 간격 조
border-(top,bottom,left,right)	테두리를 원하는 쪽에만 적

 

 

선택자 (Selector) 

 

class 선택자 

• class = 반 / 그룹핑 (하나로 묶을 때 사용) 
• 선택자 앞에 . 을 붙여줘야 class로 묶여진 선택자 적용됨 
• class에는 여러 개의 값이 들어올 수 있고 띄어쓰기로 구분된다. 

 

id 선택자 

• id = 선택자 / #선택자 

 

적용 우선순위 

!important

inline style 

#id 

.class

tag

• 다 같은 종류의 선택자인 경우 - 가장 마지막에 오는 선택자 우선순위

WHY? (종류에 따른 우선순위 부여 이유)

id는 중복되서는 안된다.

즉 tag 선택자는 포괄적, id 선택자가 훨씬 더 구체적

(일반법과 특수법 중 특수법이 우선 적용되는 원리와 비슷하다, 더 특수한 것 구체적인 걸 먼저 적용) 

 

참고 사이트: https://www.w3schools.com/cssref/css_selectors.php

CSS Selectors Reference

 

박스모델

박스를 통해 태그의 부피를 확인할 수 있다

html태그에는 화면 전체를 쓰는 태그과 자기 크기 만큼의 부피를 갖는 태그가 있다. 

block level element = 화면 전체를 쓰는 태그 

inline element = 자기 크기 만큼의 부피를 갖는 태그 

왼쪽 코드: 중복 많음 / 오른쪽 코드: 중복 없음, 더 심플하게 같은 결과 표현 가능

 

박스모델 정리

 

 

그리드

 

 

https://caniuse.com/  이 사이트에서 해당 기술을 사용했을 때 어떤 웹브라우저에서 이용할 수 있는지 없는지 알려줌

Can I use... Support tables for HTML5, CSS3, etc

 

 

미디어쿼리 

Resposive Web (반응형 웹) = 화면의 크기에 따라서 웹페이지의 요소들이 반응해서 최적화된 모양으로 바뀌게 되는 것 

화면이 최소 800픽셀일 때 아무것도 안 보이도록 설정 (800px 보다 작으면 잘 보임, 800부터는 안보임) 

화면의 크기를 늘리면 사라지는 것 확인할 수 있다

 

CSS 코드의 재사용

중복의 제거 = 코딩의 핵심 

현재는 모든 페이지에 같은 디자인을 적용하기 위해서는 style 태그 부분을 다 복붙해야함  = 비효율적

 

중복 제거 하는 방법 

1. 따로 css 파일을 생성한다

2. style 태그 안에 넣었던 내용을 복붙한다. 

3. html 파일들안에 link 태그를 사용해서 css 파일을 불러오도록 한다.

<link rel = "stylesheet" href="style.css"> 

 

 

이 코드의 의미: 

• <link> 태그 :  스타일시트, 스크립트 및 아이콘과 같은 외부 리소스를 HTML 문서에 연결하는 데 사용되는 HTML 태그
• rel = "stylesheet" : 링크된 파일이 stylesheet 라는 것을 명시
• href = "style.css" : "style.css"라는 이름으로 저장된 css파일을 불러오라는 의미, html 파일과 같은 폴더에 저장되어 있어야함. 

 

 

HTML-CSS 강의에서 실습하면서 제작한 웹사이트

netlify 이용하여 배포하였습니다

https://seongjincho-practice.netlify.app/

Seongjin Cho-Welcome