HTML / CSS 기초

김민지·2024년 8월 30일

☁️ [‎kakao X goorm] DEEP DIVE | FE

목록 보기

1/15

사용 프로그램

브라우저: Chrome
코드 에디터: VS code

HTML이란?

HTML (HyperText Markup Language)

웹페이지를 만들기 위한 표준 마크업 언어로, 웹을 이루는 가장 기초적인 구성요소
<태그 속성> 요소 <태그/>

요소의 종류?

빈 요소(empty element): 태그 안쪽에 요소가 존재하지 않는 경우
<br/>, <hr/> 등
블록요소(block element): 다른 블록요소나 인라인 요소를 포함할 수 있으며 margin과 padding 값을 가질 수 있음
<h1> ~ <h6>, <div>, <list>, <p> 등
인라인 요소(element): 블록 요소 안에 포함되어 사용되며, 다른 인라인 요소를 포함할 수 있으나 블록요소는 포함할 수 없음. width, height 값을 가질 수 없음.
<a>, <span>, <strong> 등

semantic element? <form>, <article>, <table> 등 실제 의미있는 단어로 작명된 태그

속성

태그 안쪽에서 태그의 문법명령어가 다루지 못하는 명령을 보조하는 명령어
width, height, alt, style, href 등

HTML의 구조

VScode에서 html:5이라고 입력하면 자동으로 아래의 기본 구조를 완성해줌

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

HTML의 기본 태그들과 그 역할

HTML 요소 참고서 (by mdn)

heading: 웹페이지에 표시하려는 제목들을 나타냄, 숫자가 클수록 하위단위의 제목임 <h1> ~ <h6>
paragraph: 문단을 정의할 때 사용됨 <p>
preformatted text: 미리 정의된 형식이라는 뜻으로, 텍스트에서 사용된 여백과 줄바꿈 등이 전부 그대로 브라우저 화면에 나타남 (원래는 여러개의 공백이나 줄바꿈이라도 하나의 공백으로 인식하게 됨) <pre>
list: 목록을 나타내는 태그로, 목록 항목들은 전부 동일하게 <li> 태그로 감싸지지만 목록 항목들을 전부 감싸는 태그는 순서 유무에 따라 달라진다.
(1) 숫자로 정렬되는 순서가 있는 목록은 ordered list (<ol>)이며, start=5 속성을 설정하면 5번부터 나열할 수 있고, reversed 속성을 설정하면 내림차순으로 반전시킬 수도 있으며 type="a" 속성을 설정하면 숫자 대신 a b c로 나열할 수 있으며 type="A" 속성을 설정하면 대문자 A B C로 나열할 수 있음.
(2) 숫자 없이 글머리 기호 (원형)으로 표시되는 순서가 없는 목록은 unordered list (<ul>)이며, type=square 속성을 설정하면 글머리기호가 디폴트 원형에서 사각형으로 바뀜.
break: 줄바꿈 구현 <br>
horizontal rule: 수평선 구현 <hr>

CSS란?

CSS (Cascading Style Sheets)

cascading: 계층적인

CSS 스타일 적용 우선순위

인라인 스타일 → 내부 스타일시트 → 외부 스타일시트 → 웹브라우저 기본 스타일

CSS 기본 구조

h1 {
	font-size: 100px;
    color: red;
}

CSS 속성들 (property)

<button> 태그에 적용할 속성들을 작성해보자

button {
	background-color: blue;
    color: white;
    height: 50px;
    width: 200px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    border-width: 1px;
}

색을 표현하는 법

rgb 방식: (0, 0, 0)이면 검은색, (255, 255, 255)이면 흰색임
rgb (red, green, blue);
hex 방식: #redgreenblue의 형태로, 16진수로 0~255까지의 수로 각 색을 표현
rgba 방식: rgb (red, green, blue, 투명도);로, 투명도는 0 ~ 1 사이의 소수로 표현됨. 0이면 아예 없어지고 1이면 완전히 선명하게 나타남.

수치 표현 방법

pixel (px)
percent (%): enables dynamic changes
em, rem

em: 같은 요소에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시됨. 이 때 만약 같은 요소에서 지정된 font-size가 없을 경우, 상위요소를 기준으로 함
예: font-size: 10px; → font-size: 1em == 10px, font-size: 2em == 20px
em: 최상위 요소에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시됨. 만약 최상위 요소의 font-size가 없다면 브라우저 기본값을 상속받음.
예: font-size: 10px; → font-size: 1rem == 10px, font-size: 2em == 20px

class 속성, transition

class 속성: CSS로 특정 요소를 지정할 수 있도록 해주며, 여러 요소에 동일한 class를 부여할 수 있음.
:hover : 해당 스타일링이 요소 위에 마우스가 놓일 때 적용되도록 함
:active : 해당 스타일링이 요소가 마우스로 클릭될 때 적용되도록 함
transition 속성명 지연시간(s) ease-in(or ease-out): 스타일 변경 시 부드럽게 전환하게 하기 위해 설정하는 속성 변경 속도 지연 시간으로, 초 기준이며 주로 hover와 함께 사용됨. 속성명에 all을 적으면 모든 속성에 적용되도록 한번에 설정 가능.
예: transition opacity 1s
opacity: 0~1 사이의 소수로 나타내는 투명도 속성명

가상 클래스 (Pseudo-Class)

별도의 클래스를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있음
추가 가상 클래스 설명 문서

가상 요소 (Pseudo-Element)

존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정부분 선택이 가능함
추가 가상 요소 설명 문서
특히 ::before와 ::after는 반드시 content 속성과 함께 쓰여야 함 (이 때 content는 가짜 속성!)

Layout

Float 속성: 신문 사진을 삽입할 때처럼 해당 속성을 설정하면 주변의 text들이 해당 블록을 둘러쌈
Clear: float 속성의 영향을 받지 않도록 할 수 있음.
그러나 최근에는 Layout 설정에 보다 더 강력한 방식인 FlexBox, Grid가 더 자주 사용되고 있음!
Chrome developer tools 사용하기

Margin, Padding, Border (CSS box model)

바깥부터 순서대로 margin > border > padding > 내용
padding은 음수로 지정할 수 없으나 margin을 음수로 지정하면 요소끼리 겹치게도 할 수 있음
margin 상하 좌우, margin 상 하 좌 우, margin 전체 등으로 표기 가능
border 수치 줄형태 색

Text 스타일링하기

line-height: 줄간격 지정

google fonts 사용방법

google fonts 접속하기
get font 버튼 클릭
get embedded code 클릭
복사해서 html의 head 부분에 붙여넣기

Image, Input 요소

image

<img class="image" src="image.jpg" alt="image desctiption">
object-fit : 컨테이너의 크기에 맞게 이미지 혹은 비디오의 크기를 조절하는데 사용되는 속성
object-position

input

type : 다양한 속성으로 지정 가능

Transform

transform: 요소에 회전(rotate), 크기조절(scale), 기울이기(skew), 이동(translate) 효과를 부여할 수 있음
transform 함수들

animation

animation

div {
	width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: animationName 5s linear 2s infinite alternate;
}

@keyframes animationName {
	0% {
    	background-color: lightblue;
        left: 0px;
        top: 0px;
    }
	25% {
    	background-color: lightcoral;
        left: 150px;
        top: 0px;
    }
	50% {
    	background-color: lightcyan;
        left: 150px;
        top: 150px;
    }
	75% {
    	background-color: lightgray;
        left: 0px;
        top: 150px;
    }
	100% {
    	background-color: lightgreen;
        left: 0px;
        top: 0px;
    }

background-clip

요소 내에서 배경이 확장되어야 하는 거리

Flexbox

반응형 layout 설계에 사용됨

구성

flex container: 블록요소의 css 속성으로 display: flex를 지정해서 정의함
flex items: flex container 안에 들어있는 직계 자식 블록요소들

flex container의 속성들

flex-direction: 값으로 row (가로(행 기준)로 정렬), column (세로(열 기준)로 정렬), row-reverse, column-reverse (-reverse 속성들은 순서를 뒤집음 (python의 reverse()와 비슷한 결과)를 가짐
flex-wrap: flex container 내에 요소들이 늘어나면 자연히 요소들의 너비의 합이 container의 너비를 넘어서는 지점이 발생함. 이 때 요소들을 한 줄에 포함시키기 위해 요소들의 너비를 container의 너비에 맞춰서 줄이는 방식이 디폴트인 nowrap이고, 요소들의 너비를 변경하지 않기 위해 줄바꿈을 해주는 방식이 wrap 이다.
wrap-reverse는 줄바꿈이 아래로 내려가는 것이 아닌, 윗줄로 올라가는 방식으로 일어나는 옵션이다.

flex-flow: 앞서 언급한 flex-direction, flex-wrap을 한꺼번에 설정할 수 있는 속성으로, flex-flow: <flex-direction> <flex-wrap>의 형태로 설정함
디폴트 설정은 flex-flow: row nowrap임
justify-content: 가로 (행/주축) 기준 정렬
space-around vs space-evenly
align-items: 세로 (열) 기준 정렬 → 한 줄 내에 존재하는 요소들을 정렬

align content: 두 줄부터 사용하는데에 의미가 있으므로 flex-wrap: wrap인 상태에서 사용해야 함

flex item의 속성들

order : 아이템들의 정렬순서를 기존의 container 차원에서는 -reverse 로 반대로 뒤집는 정도로만 제어가 가능했다면, item 속성에서는 보다 더 구체적으로 제어할 수 있음

order의 기본값은 0이며, 상대적으로 크기를 비교해서 작은 값이 앞으로, 큰 값이 뒤로 가게 됨. 따라서 만약 어떤 요소를 맨 앞으로 보내고 싶다면 -1 값을 할당해주면 되고, 맨 뒤로 보내고 싶다면 1 이상의 값을 할당하면 됨.
flex-grow

아래의 예시를 보면 요소들이 컨테이너를 채우고 남은 여백(180px)을 flex-grow 값의 비율에 따라 분배받는 것을 확인할 수 있음 → 1 : 1 : 2 (0은 제외하고 계산)인데 전체가 180이므로 45 : 45 : 90으로 분배되어서 최종 너비가 145 : 145 : 100 : 190으로 계산됨

flex-shrink: 주로 컨테이너를 벗어난 아이템의 너비를 분배해서 축소하는데에 사용되며, 자연히 flex-wrap: wrap 속성이 부여된 경우에는 적용되지 않음. flex-shrink의 기본값은 1.
✨ 만약 컨테이너에 flex-shrink: 1 옵션을 주면 모든 요소가 같은 너비를 유지하며 컨테이너에 딱 맞게 줄어듦.

✨ 즉, flex-grow와 flex-shrink는 내부 아이템들을 컨테이너에 딱 맞추고자 할 때 사용할 수 있는 옵션임!!

flex-basis : 아이템 각각의 기본 크기를 지정하는 속성으로 px, %, em, rem 등 모든 단위를 사용할 수 있음
align-self : align content의 속성값들 ( flex-start, flex-end, center, stretch, spac-between, space-around, normal )을 아이템(요소) 하나하나에 적용하고자 하는 경우에 사용 (아래 그림과 같이, 나머지 요소들과 다른 설정을 적용할 수 있음)
flex : flex-grow, flex-shrink, 그리고 flex-basis가 종합된 약어로, 아래와 같이 사용됨

/*하나의 값, 단위 없음 : flex-grow 속성값*/
flex: 2;

/*하나의 값, 단위 있음: flex-basis 속성값*/
flex: 10px;

/*두 개의 값: flex-grow | flex-basis 속성값*/
flex: 1 30px;

/*두 개의 값: flex-grow | flex-shrink 속성값*/
flex: 2 2;

/*세 개의 값: flex-grow | flex-shrink | flex-basis 속성값*/
flex: 2 2 10%

Grid

flex box가 단순한 1차원의 레이아웃 (행(row) or 열(column))을 제공하는 반면, Grid는 2차원 (행 and 열)의 레이아웃을 제공함!

grid container 속성

display: grid : 컨테이너가 grid layout을 가질 것임을 선언하는 속성
grid-template-columns : 다양한 단위를 활용해 그리드 형태 정의
fr은 fraction의 단위로, 앞에 붙는 숫자에 따라 비율에 맞춰서 남은 공간을 분배하라는 뜻임

.container {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, minmax(100px, auto));
}

repeat(횟수, 단위)로 사용하면 동일한 단위로 횟수개만큼 분할됨
minmax(최소, 최대)를 사용하면 각 요소 내부의 내용이 아무리 적더라도 최소는 확보하고, 각 요소의 내용이 아무리 많더라도 최대를 지키라는 뜻

.container {
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

auto-fill을 사용하면 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채움. 단, 만약 20%로 설정했는데 요소의 개수가 4개라면 80%만 채워지고 남은 20%는 비워짐.
auto-fit을 사용하면 개수 무관히 무조건 컨테이너를 꽉 채우며 분할됨.
gap : gap <row-gap> <column-gap> 형태로 사용하며, 더 쉽게 정리해보면 gap 세로여백 가로여백 순이다. 각각 row-gap, column-gap을 활용해 별도로 지정도 가능하다.
각 요소의 가로, 세로 길이를 grid-template-columns 기준으로 설정하기:
(1) grid-column-start, grid-column-end : 행(가로) 기준으로 앞서 grid-template-columns로 설정해둔 칸들을 몇개씩 가질 지를 결정함.
예를 들어 아래 그림과 같이 설정하기 위해서는 grid-column-start: 1, grid-column-end: 3 이라고 설정해야 함

(2) grid-row-start, grid-row-end : 열(세로) 기준으로 앞서 grid-template-columns로 설정해둔 칸들을 몇개씩 가질 지를 결정함.

display: table

과거에는 grid, flex 대신 table 옵션을 주로 사용했었다

Position

static : 디폴트값으로, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정 불가. 즉, top, left 등의 위치설정 자체가 불가해짐.
relative : 요소 자기자신을 기준으로 배치 (디폴트 위치 기준으로 좌표를 지정)
absolute : 부모 요소를 기준으로 배치 → 부모요소에 position: static이 아닌것이 있다면 그것을 기준으로 배치, 없다면 body 기준으로 배치
절대 좌표와 함께 위치 지정 가능

✨ 주로 absolute 요소는 relative 요소 안에서 사용되어서 부모요소인 relative를 기준으로 배치하게 됨

fixed : 스크롤과 상관없이 항상 문서 최 좌측 상단을 기준으로 좌표를 고정 → 스크롤이 있을 때 스크롤을 내리면 해당 요소도 함께 내려감 (화면에 내내 나타남)
sticky : 스크롤 영역 기준 배치. 초기 위치는 변환이 불가하지만, 스크롤을 내렸을 때 어떤 위치에서 stick될 지는 지정이 가능.

Z-index

z-index가 더 큰 요소는 더 작은 요소에 비해 더 앞쪽에 나타남
이 때, position: static은 z-index값에 무관하게 가장 뒤쪽에 위치함.
자식은 부모의 z-index값에 영향을 받으므로 부모의 z-index값이 작다면 뒤로 갈 수 밖에 없음.
만약 두 요소 모두 z-index가 동일하거나 position: static 인 경우에는 나중에 작성된 요소가 앞에 나타남

Media Query

반응형 웹디자인에서는 미디어쿼리를 사용해 적용하는 스타일을 기기의 화면 크기마다 전환할 수 있음

@media (조건) {
	스타일
}

기본 문법: @media [only 또는 not] [미디어유형] [and 또는 ,] (조건문) {실행문}
→ ,는 or와 동일함

예시:

/*최소 너비가 1000px보다 클 때*/
@media (min-width: 1000px) {
	.container {
    	grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

/*너비가 700px ~ 999px*/
@media (min-width: 700px) and (max-width: 999px) {
	.container {
    	grid-template-columns: 1fr 1fr 1fr;
    }
}

/*너비가 749px 미만*/
@media (max-width: 749px) {
	.container {
    	grid-template-columns: 1fr 1fr;
    }
}

min/max 작성 시, min은 작은 단위부터, max는 큰 단위부터 작성해야 함

CSS 적용 우선순위

!important를 붙인 속성
HTML에서 style을 직접 지정한 속성
#id로 직접 지정한 속성
. 클래스, : 가상클래스로 지정한 속성

box-sizing 속성

box 속성별로 주어진 width과 다른 수치로 배정되는 경우가 있음

content-box : 콘텐츠 영역을 기준으로 크기를 정함
border-box : 테두리를 기준으로 크기를 정함

사용자 지정 속성

CSS를 작성하는 자가 정의하는 객체로, 문서 전반적으로 재사용할 임의의 값을 담음 (하나의 css 파일에서만 선언해도 나머지 파일들에 전부 영향)
전용표기법을 사용해서 정의 → var() 함수로 접근

/*css 변수를 생성*/
:root {
	--main-bg-color: #000080;
    --main-text-color: #fff;
}

/*css 변수를 사용*/
body {
	background-color: var(--main-bg-color);
    color: var(--main-text-color);
}

JS로 변경도 가능하다고 함

SVG (Scalable Vector Graphics)

XML 포맷으로 작성되므로 바로 css, js로 조작도 가능하고 크기에 관계없이 같은 해상도를 유지함

김민지

다음 포스트

HTML / CSS 기초

☁️ [‎kakao X goorm] DEEP DIVE | FE

사용 프로그램

HTML이란?

HTML (HyperText Markup Language)

요소의 종류?

속성

HTML의 구조

HTML의 기본 태그들과 그 역할

CSS란?

CSS (Cascading Style Sheets)

CSS 스타일 적용 우선순위

CSS 기본 구조

CSS 속성들 (property)

색을 표현하는 법

수치 표현 방법

class 속성, transition

가상 클래스 (Pseudo-Class)

가상 요소 (Pseudo-Element)

Layout

Margin, Padding, Border (CSS box model)

Text 스타일링하기

Image, Input 요소

Transform

animation

background-clip

Flexbox

Grid

display: table

Position

Z-index

Media Query

CSS 적용 우선순위

box-sizing 속성

사용자 지정 속성

SVG (Scalable Vector Graphics)

[ 과제1 ] HTML, CSS를 이용해서 넷플릭스 사이트 만들기

0개의 댓글