CSS는 정말 간단하게 배웠으니까, 정리도 간단하게...!!
html은 css나 js가 없었으면 큰일났을거야 진짜 너무 심심한 화면 어떡할거야....
CSS란 무엇인가
. CSS: Cascading Style Sheets로 웹 개발자가 기본값의 서식을 가진 HTML code에 시각적인 효과를 줄 때 사용하는 언어이다. css 코드는 selector body 안에 "property: value;"로 구성된다.
각 Code의 용도 및 목적
. style: HTML 코드 안에서 CSS 코드 사용시와 동일한 효과를 줄 때 사용한다. 1개 이상의 style 효과를 주고 싶을 때는 semicolon(;)으로 구분하여 추가할 수 있다.(계속 중복해서 추가할 수 있다.)
<p style="color: red; font-size: 20px;">I'm learning to code!</p>
. link: css와 html 파일을 연동할 때 사용한다. 반드시 html head 속성에 있어야하며 href(css 파일 위치 정의), type(파일의 속성을 정의: css/text), rel(html 파일과의 relationship 정의: stylesheet) 속성이 필요하다. 폰트를 로드하고, 부트스트랩에서 스타일을 가져올때에 추가하는게 다 여기에 해당한다.
<head> <link href="./style.css" type="text/css" rel="stylesheet"> <title>Vacation World</title> </head>
Selector
. * universal: html 안에 있는 모든 코드를 전체 선택하여 css 양식을 적용할 때 사용한다.
. tag: html의 특정 tag를 선택하여 css 양식을 적용할 때 사용한다.
. class: html에서 css 양식을 일괄 적용할 대상을 grouping 할 때 사용하며 css에서 수식하기 위해서는 '.class명' 형태를 사용해야 한다. class가 2개 이상의 이름을 가질 때 css에서는 각 단어로 코드를 적용할 수 있다.(id 보다 포괄적으로 사용한다.)
. id: 고유한 구분자로 html 문서내에서 단독으로 사용하여 css 양식을 적용할 때 쓰이며 css에서 수식하기 위해서는 '#id명' 형태를 사용해야 한다.(class보다 좀 더 상위 코드이다.)
(* 구체적/선순위 ← <id<class<tag → 포괄적/후순위: css code 적용시 id의 양식을 덮어쓰기 위해서는 또 다른 id 양식을 추가하는 방법뿐이다. 향후 쉬운 코드작성을 위해서는 id 보다는 tag selector를 사용하는 것을 추천한다. tag:.p, .a, etc.)
. : state: html 화면에서 어떤 상태가 감지됐을 때 그 상황에서 css 양식을 적용할 때 사용된다. (예시: button:hover)
Visual rules
. font-family: 웹페이지의 글꼴을 변경할 때 사용하며 글꼴이 정상적으로 보이기 위해서는 사용자의 PC에 해당 글꼴이 내장되어 있어야 한다. 글꼴을 선택하지 않을 경우, 기본 설정값은 Times New Roman이며, 웹 페이지를 빠르게 실행시키기 위해서는 2~3개의 글꼴만을 사용토록 제한하는 것이 좋다. 그리고 사용하려는 글꼴이 2단어 이상이라면 따옴표로 묶는 것이 좋다.
h1 { font-family: Garamond; } h1 { font-family: "Courier New"; }
. font-size: 웹페이지 글의 사이즈를 변경할 때 사용한다. 단위는 px(pixel)를 사용한다.
p { font-size: 18px; }
. font-weight: 웹페이지 글의 두께를 변경할 때 사용한다.(bold/normal/thin) 숫자 형태(100~900)로도 두께를 표현할 수 있다. 그 중에서 유효한 값들은 200~500 사이에 있는 100 단위의 숫자들이다.(300:light, 400:normal, 700:bold)
p { font-weight: bold; } header { font-weight: 800; }
. font-style: 웹페이지 글을 italic으로 변경할 때 사용한다. 기본값은 normal이다.
h3 { font-style: italic; }
. text-align: 웹페이지 글의 정렬을 변경할 때 사용한다. (left/center/right)
h1 { text-align: right; }
. color: foreground color, 웹페이지 본문의 글꼴색을 변경할 때 사용한다.
. background-color: 웹페이지 본문의 배경색을 변경할 때 사용한다.
h1 { color: red; background-color: blue; }
. opacity: 웹페이지 본문의 글꼴 및 배경색의 투명도를 변경할 때 사용한다.(0~1의 범위의 숫자가 사용된다. 1은 100% 색감이 나오고 0은 투명하게 표현된다.)
.overlay { opacity: 0.5; }
. background-image: 웹페이지의 배경을 특정 이미지로 사용할 때 사용한다.
. background-size: 이미지가 웹페이지 사이즈에 적절하게 맞을 수 있도록 자동 조정할 때 사용한다.
.main-banner { background-image: url("https://www.example.com/image.jpg"); background-size: cover; }
box model
. height/width: 웹페이지에 공간을 정의할 때 사용한다. 특정한 수치로 공간을 정의하여 웹에 표시한다.
height: 80px; width: 240px;
. border: 그림을 보관하는 액자 틀과 같이 웹페이지에 작성된 글의 외곽선을 지정할 때 사용한다. 기본값은 medium none color이다.(width,style,color)
. width: thin, medium, thick
. style: https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#Values
. color: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
p { border: 3px solid coral; }
. border-radius: 웹페이지에 border 지정시, 네 외곽 모서리를 둥근 형태로 완만하게 만들 때 사용한다.(border를 완전히 둥글게 만들고 싶으면 border-radius: 100%;로 설정하면 된다.)
div.container { border: 3px solid rgb(22, 77, 100); border-radius: 5px; }
. padding:(여기서 주의해야한다. 다음에 나오는 margin과 정말 헷갈리기 쉽기 때문) content box와 border box 사이의 여백을 지정할 때 사용한다. 웹페이지 본문의 내용과 그것을 감싸는 border와의 간격이라고 생각하면 된다. 각 위치마다 padding 효과를 다르게 주고 싶다면 padding-top/right/bottom/left 형태로 사용할 수 있다. 4개 모서리에 전부 다른 padding 효과를 주고 싶다면 padding code에 각각의 px 정보를 입력한다.(top right bottom left 순서로 적용) 상/하, 좌/우로 구분하여 padding 효과를 적용할 수도 있다.(상/하 좌/우 순서로 적용)
p.content-header { border: 3px solid coral; padding: 10px; } p.content-header { border: 3px solid grey; padding: 6px 11px 4px 9px; } p.content-header { padding: 5px 10px; }
. margin: content를 감싸는 외부와 border box 사이의 여백을 지정할 때 사용한다. 사용법은 padding과 동일하다. 좌/우를 여백을 웹브라우저 환경에 맞춰 동일하게 주고 싶다면 auto를 사용할 수 있다.(width를 설정하여 해당 요소의 너비를 설정해야 좌/우 여백이 있는 상태에서 가운데 정렬할 수 있다.)
div.headline { width: 400px; margin: 0 auto; }
오늘의 CSS TIL마무리!!!!
뭔가 내일 다시 수업이 있는데 JS까지 미리해야할 것 같지만...조바심 내지말고 내일 JS나 PYTHON수업을 들으면 다시 차근차근 따라가야지.
누구에게나 친절한 백엔드 개발자가 되어봅시다 😎
