Web

HTML & CSS 기초 - css

sueeee-e 2024. 10. 11. 14:15

앞의 내용은 html에 관한 내용이었고 이번엔 css에 대한 내용을 다뤄보겠습니다. 

 

html 이 몸의 구조(뼈, 근육)을 담당한다면                                           - 문서의 정보, 구조 설계

css는 옷, 신발 같이 외적으로 꾸며주는 역할이라고 생각하면 쉽습니다. - 문서 디자인

 

html의 마크업 언어가 있어야 꾸며줄 문서가 존재하기 때문에 css가 역할을 할 수 있는 거라 html&css는 묶어서 많이 이야기 합니다. 

 

🏷️ CSS 문법

선택자, 속성, 값, 선언, 선언부, 규칙

h1{color:yellow; font-size:2em;}
h1, h2, h3, h4, h5, h6 { color: yellow; }/*그룹화 가능*/
* { color: yellow; } /*모든 태그 요소에 반영*/

 

✔️ 스타일 적용 방식

inline 스타일

<div style="color:red";> ...</div>

 

internal 스타일 - <head> 내부에 들어간다. 이렇게 하면 모든 <태그>에 같은 스타일을 주게 된다

<style> div {color: red;} </style>

 

external 스타일 - css 파일을 만들고 link태그로 연결해줌

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

 

import 스타일 - 외부 스타일 시트 파일을 선언, 성능이 안좋아 잘쓰이지 않음

@import url("css/style.css");

 

🏷️ 선택자

  • class 선택자 

css파일 : 

.html { color: purple; }
.foo { font-size: 30px; }
.bar { color: blue; }

 

html파일:

<dt class="html">HTML</dt>
<p class="foo bar"> ... </p>

 

  • id 선택자

: class 선택자와 다르게 css파일에는 . 대신 #을 쓰고 html에서는 class 말고 id 로 지정해준다. id는 문서 내에 유일해야 함*

 

  • 속성선택자 

 요소-클래스 조합(p.bar{...}), 다중 클래스 조합(.foo.bar{...}) , id-클래스 조합(#foo.bar{...})으로도 가능하다. 

 그리고 단순 속성으로 선택도 가능하고( p[class]{...} , p[class][id]{...} ) 정확한 속성값으로도 선택할 수 있다. (p[class="foo"]{...})

 마지막으로, 부분 속성값으로도 선택이 가능하다. [class~ = "color"] [class^ = "color"] [class$ = "color"] [class* = "color"] 

 

*부모-자식 / 조상-자손 / 형제 관계

 

자손 선택자 : div span { ... }

자식 선택자 : div > h1 { ... }

형제 선택자 : div + p { ... }

 

  • 가상 선택자

- :가상 클래스 : 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스

ex)*문서구조 관련 :first-child {...} 첫번째 자식 요소 선택, *앵커 관련 :link {...} 하이퍼링크이면서 아직 방문하지 않는 앵커,

*사용자동작 관련 :focus {...} 현재 입력 포커스를 갖고 있는 요소

 

- :가상 요소 : 미리 정의해놓은 위치에 삽입이 되도록 약속되어 있는 보이지 않는 요소

ex) :before 가장 앞에 요소를 삽입, :first-line 요소의 첫 번째 줄에 있는 텍스트 

 

✔️구체성(명시도) - 구체성이 높은 스타일을 적용 

!important >>inline 스타일 1000 > id  0100 > 클래스 0010 > 요소 0001 > 전체 * 0000

 

✔️상속 - 자식은 부모의 스타일을 상속받을까? *box 모델 관련( margin, padding, background, border )은 상속받지 않음

+상속된 값은 아무런 구체성을 갖지 않는다. 0000도 아님 

 

✔️캐스케이딩 

- 캐스케이드 규칙 : 1. 중요도&출처  2. 구체성  3. 선언 순서(아래께 적용)

* 출처 : 사용자 !important> 제작자 !important > 제작자 > 사용자 >사용자에이전트

 

🏷️ 속성

* 참고 사이트 https:// www.w3schools.com ,  https://developer.mozilla.org/en-US/docs/Web/CSS

정의 : 기본 값, 상속 여부, 애니메이션 가능 여부, 사용가능한 css 버전 을 알 수 있다.

 

*길이 단위 : 절대 길이 : px, pt ... 상대 길이 : %(부모값에 대해), em(폰트사이즈 기준으로 값을 환산 1em 은 부모의 값의 1배), rem, vw ...

pt는 해상도에 따라 다른데 윈도우에서는 9pt = 12px, 맥에서는 9pt = 9px 권장하지 않음

 

✔️색상

<h1 style="color: red"> heading </h1>
<h1 style="color: #ff0000"> heading </h1>
<h1 style="color: #f00"> heading </h1>
<h1 style="color: rgb(255,0,0)"> heading </h1> 0,0,0검정, 255,255,255하양
<h1 style="color: rgba(255,0,0, 0.5)"> heading </h1> /(R 적색, G 녹색, B 청색, A 투명도)/

 

✔️background : -color , -image(url), -repeat, -attachment, -position

축약형으로도 가능

background: [-color] [-image] [-repeat] [-attachment] [-position];
background: yellow url(https://www.w3schools.com/CSSref/img_tree.gif) no-repeat center top;

 

✔️boxmodel

 

-Content : 요소의 실제 내용을 포함하는 영역, height, width

 

-Padding : content와 border 사이의 여백, content의 연장선

기본값 0, -top, -right, -bottom, -left >축약형도 가능(상하)( 좌우)

 

-Border : content영역을 감싸는 테두리 선 -width, -style, -color

축약형 : border 1px solid #000 , width : top, right, bottom, left

 

-Margin : border 바깥쪽 영역, 다른 요소와 구별하기 위한 빈 영역

padding과 비슷함, auto 기능(정렬) margin: 0 auto 자주쓰임

특징 : 마진 병합 > top과 bottom 값이 겹치면 더 큰 값으로 적용

 

*margin vs padding 

  • margin : 양수 가능, 음수 가능, auto 가능, 단위 %, px.. , 상속 x
  • padding : 양수 가능, 음수 불가능, auto 불가능, 단위 %, px..%는 가로축 width 기준

width : 요소의 가로값을 결정, auto (기본값), px, % 로 설정 가능

height : 요소의 높이값을 결정,  auto (기본값), px, % 로 설정 가능

> 박스 사이징 border까지 포함 , 부모의 고정 값이 정해져있어야 %로 길이 지정 가능

 

✔️font, text 관련 속성들 

1. typography

 

typography 구조 

 - em : 폰트의 전체 높이 

 - ex : 영문 소문자까지의 높이 

 - Baseline : 소문자를 기준으로 하단 라인

 

 모든 폰트는 em 박스를 가지고 있다. 

 

2. font-family : 글꼴을 지정하는 속성

 family-name 여러 개 지정가능 우선순위를 가짐  generic-family 폰트 사용불가 시 브라우저가 대체폰트를 지정해줌

영문 폰트, 한글 폰트 각각 지정해줄 수 있다. 

font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;

 

3. line-height : 줄의 높이 - 글 사이 간격(행간) 조절 , 기본값 : normal

line-height : 2 , 20px, 200% 이런 식으로 입력할 수 있고 이 중 단위없는 숫자로 입력하는 것을 추천한다. 2와 200%이 같은 의미라고 볼 수 있지만 상속 개념으로 본다면 %는 부모의 상속 내용을 그대로 받는 것이라 그냥 2로 입력하는 것이 좋다. px은 글씨 크기에 따라 달라져서 추천하지 않는다. 

 

4. font-size : 글꼴의 크기를 지정하는 속성, 기본값: medium, 16px

absolute size : medium에 대한 상대적인 크기로 브라우저마다 다르게 지정 small, x-small, xx-large

relative size : 부모 요소의 크기에 대해 상대적이다 smaller 0.8배, larger 1.2배

length : px, em , rem 등 단위로 지정하여 고정된 크기를 나타냄 

percent(%) : 부모 요소의 크기를 기준으로 백분율 계산 값을 나타냄 80%

viewport units : vw, vh 단위로 뷰포트를 기준으로 유동적인 폰트사이즈를 지정함 vw는 뷰포트 width의 1%, vh는 height 1%

 

5. font-weigh : 글꼴의 굵기를 지정하는 속성, 기본값 normal400

bold : 700, bolder, lighter, 숫자 지정 -> 폰트에 따라 바뀌지 않을 수도 있음 

 

6. font-style : 글꼴의 스타일을 지정하는 속성 , 기본값 normal 

italic 기울어지게 , oblique<각도> 각도를 추가하여 지정

 

7. font-varient : 글꼴의 형태를 변형하는 속성, 소문자를 작은 대문자로 , 기본값 : normal

small-caps 소문자를 작은 대문자로 변형

 

8. font : 위의 속성들을 축약형으로 쓸 수 있다. - 선언 순서 지켜야 하고, size, family는 필수 - 지양

font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit;
font: oblique small-caps bold 16px/1.5 '돋움';

 

9. webfont 

시스템 폰트: 시스템에 내장되어있는 폰트 , 이미지 폰트: 이미지에 넣은 폰트 , 웹 폰트: 사용자의 로컬 환경에 글꼴을 다운로드 받아 적용

@font-face {
    font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */
    src: url(NanumGothic.eot); /* 적용 될 웹 폰트의 경로 */
    font-weight: bold; /* 필요에 따라 지정 */
    font-style: italic; /* 필요에 따라 지정 */
}

 

10. vertical-align : 수직 정렬 , 기본값 :baseline ==0px -> 인라인요소에 지정, 대부분 부모요소에 상대적으로 정렬됨

숫자 입력 ,% 또는 *키워드 입력

*sub : 부모 아래 첨자 기준으로 정렬 super : 부모 위 첨자 기준으로 정렬 text-top : 부모 텍스트의 맨 위(Ascender 제외)  text-bottom : 부모의 텍스트의 맨 아래(Descender 제외) middle : 부모의 중앙에 위치 top : 부모의 맨 위 위치 bottom : 부모의 맨 아래 위치

 

11. text-align : 수평 정렬 , 기본값 : left (경우에 따라 right)

-> 블럭요소 안에서 인라인 레벨에 적용, 블럭레벨은 정렬안됨 블럭 요소 가운데 정렬하려면 margin을 auto로 적용

left, right, center, justify(라인 양쪽 끝에 붙여 정렬)

 

12. text-indent : 들여쓰기 속성 , 기본값 : 0  -> px, em 등 수치로 입력, %로 입력

 

13. text-decoraiton : 텍스트 꾸밈, 장식을 지정하는 속성 , 단축 속성 기본값 none currentColor solid *단일 속성도 있음 

text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;

*-line : none, underline, overline, line-through

*-color : soild, double, dotted, dashed, wavy

 

단어 관련 속성

- white-space : 공백 관련 제어 normal, nowrap, pre, pre-line 등

- letter-spacing : 자간 설정 normal, px,cm 입력

- word-spacing : 단어 간 간격 설정 normal, px 입력

- word-break : 라인 끝에 나올 경우 단어를 자르는 위치 normal, break-all, keep-all 등

- word-wrap : 영역 넘어가는 텍스트 어디서 줄바꿈할지 normal, break-word 강제 개행

 

✔️ 레이아웃 관련 속성

 

1. display : 요소의 랜더링 박스 유형을 결정 (인라인, 블록) - 기본값은 요소마다 정해져있음 

-> none, inline, block, inline-block(인라인으로 보여지지만 블록 특성을 가짐), flex

* display와 box model의 관계

display  width   height   margin   padding      border    
block ㅇ ㅇ ㅇ ㅇ ㅇ
inline X X 좌/우 ㅇ(설명) ㅇ(설명)
inline-block ㅇ ㅇ ㅇ ㅇ ㅇ

 

flex : sizing을 유연하고 균형있게 배치할 수 있다. 예를 들어 flex-direction로 가로/세로배치해주고 싶다면 동시에 display를 flex로 설정해주어야 된다는 것이다.  align-items나 justify-content를 center로 해주는 등 축 수직 방향 정렬/축 수평방향 정렬 등을 해줄 때도 display :flex 가 필요하다 

 

2. visibility : 요소의 화면 표시 여부 지정 , 기본값: visible -> hidden, collapse(셀 간의 경계 무시하고 숨김)

화면에 숨길 때 display : none 해도 되는데 이는 요소가 렌더링 되지 않는다. hidden은 렌더링 되며 공간차지도 한다는 차이점이 있다.

 

3. float : 요소를 보통의 흐름에서 벗어나게 함, 기본값:none -> left, right

대부분 요소의 display값을 block으로 변경하고 주변 텍스트나 인라인요소가 주위를 감싸는 특징이 있다.

다른 요소의 배치에도 영향을 줌

 

4. clear : floating 된 요소의 영향에서 벗어나 다음 행으로 이동하는 속성, 기본값 none -> left, right, both 허용하지 않음

블록 레벨 요소에만 적용 가능하다. 

 

5. position : 요소의 위치를 정하는 방법을 지정하는 속성, 기본값: static (offset 값이 적용되지 않음)

relative(자신이 원래 있어야 할 위치를 기준으로 offset에 따라 배치), normal-flow 흐름에 따르고 부모 영향 x, 주변 영향 x

absolute(부모 요소의 위치를 기준으로 offset에 따라 배치), normal-flow 흐름 벗어나고 static이 아닌 조상까지 거슬러 올라간다.

fixed(뷰포트를 기준으로 offest 에 따라 배치) 부모의 위치에 영향을 받지 않고 화면의 스크롤에도 관계 없이 정해진 위치에 배치된다.

*offset (상대 주소) top, bottom, left, right -> px나 %로 입력

 

6. z-index : 쌓임 순서를 지정 , 기본값 : auto , 숫자로 지정

-> z축이라고 생각하면 됨 (음수 사용 가능), position이 static이 아닌 경우 지정가능

 

🏷️ 미디어 쿼리 (Media Queries)

: 각 미디어 매체에 따라 다른 스타일을 적용할 수 있게 만드는 것

 

@media 미디어 쿼리문 { 스타일 }   // 미디어 쿼리문이 참이면 스타일 적용

 

- 미디어 타입 : all, braille, embossed, handheld, print, projection, screen, speech ...

- 미디어 특성 : width(브라우저 창 너비), orientation(세로/가로 모드), height, divice-width, aspect-ratio, grid ...

 width를 이용해서 반응형으로 구현할 수 있다. 

 

선언 방법 은 ccs 파일 내부나 <style>태그 내부에서 @media screen and (color)  이런 식으로 선언하고 다른 방법도 있지만 대부분 이렇게 쓰이기 때문에 다른 방법은 필요 시 찾아보자

 

가장 많이 쓰이는 반응형 미디어 쿼리 중 하나는 아마도

@media (min-width : 768px) and (max-width :1024px) { ... } 이게 아닐까 생각한다. 

@media (max-width: 767px) {
	body { background-color: gold; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	body { background-color: lightblue; }
}
@media (min-width: 1025px) {
	body { background-color: lightpink; }
}

 

media_query_list  리스트로 작성 가능하며 expression 괄호를 감싸 미디어 표현식을 쓸 수 있다

 

+ 뷰포트

가상의 화면 사이즈 

-> 설정 방법 : <meta> 태그 ,<head> 태그에 위치 해야 함

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

css에 대한 내용이 많아서 글이 많이 길어졌는데 아주 css의 모든 것은 아니지만 기본적인 내용들은 거의 정리한 것 같고 부족한 부분은 

  참고 사이트 https:// www.w3schools.com ,  https://developer.mozilla.org/en-US/docs/Web/CSS

여기서 찾아보면서 익숙해지면 될 것 같습니다;))

 

https://www.boostcourse.org/cs120/joinLectures/33586

 

비전공자를 위한 HTML/CSS

부스트코스 무료 강의

www.boostcourse.org