22.12.16 배운 내용 정리
텍스트를 표현하는 다양한 스타일
(글꼴 관련 스타일, 웹 폰트 사용하기, 텍스트 관련 스타일, 목록 스타일, 표 스타일)
글꼴 관련 스타일
① 글꼴을 지정하는 font-family 속성
웹 문서에서 사용할 글꼴은 font-family 속성으로 지정함.
이 속성은 <body> 태그를 비롯해 <p> 태그나 <hn> 태그처럼 텍스트를 사용하는 요소에서 주로 사용함.
기본형 : font-family:<글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]
웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용해 웹 브라우저 화면에 표시됨.
웹문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 웹 문서에 의도한 글꼴이 아닌 글꼴로 표시됨.
따라서 웹 문서에서 글꼴을 지정할 때는 두 번째, 세 번째 글꼴까지 생각해 둬야함.
글꼴 이름을 2개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표(,)를 넣어 구분함.
※ 글꼴 적용하기
다음과 같이 글꼴을 지정하면, 웹 문서 전체에 '맑은 고딕'이라는 글꼴을 적용함.
그런데 만약 '맑은 고딕' 글꼴이 없다면 '돋움' 글꼴로 적용하고 이것 마저 없으면 '굴림' 글꼴로 적용함.
ex. body { font-family: "맑은 고딕", 돋움, 굴림 }
("맑은 고딕" 같이 두 단어 이상으로 된 글꼴 이름은 한 덩어리라는 것을 알 수 있도록 큰따옴표로 묶음.)
font-family 속성은 <body> 태그 스타일에서 일단 한번 정의하면 문서 전체에 적용되고,
문서 안의 모든 자식 요소에 계속 같은 글꼴을 사용함.
② 글자 크기를 지정하는 font-size 속성
글자 크기는 font-size 속성을 사용하여 조절할 수 있음.
글자 크기의 단위는 px(픽셀)이나 pt(포인트) 등으로 지정할 수 있고 백분율을 사용할 수도 있음.
기본형 : font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
// <절대 크기> : 브라우저에서 지정한 글자 크기
// <상대 크기> : 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정
// <크기> : 브라우저와 상관없이 글자 크기를 직접 지정
// <백분율> : 부모 요소의 글자 크기를 기준으로 백분율(%) 표시
※ 키워드를 사용하여 글자 크기 지정하기
글자 크기를 사용하도록 미리 약속해 놓은 키워드 중에서 하나를 사용할 수 있으며,
사용할 수 있는 값을 크기 순서대로 나열하면 다음과 같음.
xx-small < x-small < small < medium < large < x-large < xx-large
※ 단위를 사용하여 글자 크기 지정하기
CSS에서는 키워드보다 단위를 사용해서 글자 크기를 직접 지정함.
사용하는 단위는 px(픽셀)이나 pt(포인트), em 등이며 음숫값은 사용할 수 없음.
모바일 기기까지 고려해야하는 요즘에는 상대 크기 단위인 em이나 rem을 많이 사용함.
1em = 16px = 12pt
| 종류 | 설명 |
| em | 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정함. |
| rem | 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정함. |
| ex | 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정함. |
| px | 모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정함. |
| pt | 포인트라고 하며, 일반 문서에서 많이 사용함. |
※ 백분율을 사용하여 글자 크기 지정하기
백분율을 부모 요소의 글자 크기를 기준으로 계산하여 지정하는 방법임.
단, 백분율로 계산하려면 부모 요소의 글꼴 크기가 font-size: 16px처럼 단위로 표현되어 있어야 함.
③ 이탤릭체로 글자를 표시하는 font-style 속성
글자를 이탤릭체로 표시할 때는 font-style 속성을 사용함.
이탤릭체로 바꾸는 속성값은 italic과 oblique가 있는데 웹에서는 주로 italic을 사용함.
기본형 : font-style: normal | italic | oblique
// normal : 기본값으로 일반적인 형태로 표시
// italic : 이탤릭체로 표시
// oblique : 이탤릭체로 표시
※ italic과 oblique의 차이
italic은 기울어진 글꼴이 처음부터 디자인되어 있는 반면에 oblique는 원래 글꼴을 단지 기울어지게 표시함.
대부분 기울어진 형태에 맞게 글꼴이 다듬어져 있어서 웹에서는 주로 italic을 사용함.
④ 글자 굵기를 지정하는 font-weight 속성
글자 굵기를 지정하는 속성은 font-weight으로 웹 문서를 작성할 때 자주 사용함.
미리 만들어진 예약어(normal, bold, bolder)나 숫잣값을 사용해 굵기를 지정할 수 있음.
100~900 사이에서 400은 normal, 700은 bold에 해당하며,
예약어 대신 숫잣값을 사용하면 글꼴 크기를 좀 더 세밀하게 조절할 수 있음.
기본형 font-weight: normal | bold | bolder | lighter | 100 | 200 | ... | 800 | 900
// normal : 기본값, 보통 굵기
// bold : 굵게
// bolder : 원래보다 더 굵게
// lighter : 원래보다 더 가늘게
| 100 | 200 | ... | 800 | 900 → 100~900 사이의 굵기를 표현하며 100은 가장 가늘게, 900은 가장 굵게
※ 글꼴 관련 스타일 사용하기
font-family, font-size, font-style, font-weight를 사용하여 글자를 꾸밈.
웹 문서 전체 글자 크기를 20px로 지정하지만 제목 텍스트나 강조하고 싶은 부분의 글자 크기를 조절하고,
필요한 부분은 이탤릭체나 굵은 글자로 표시함.
웹 폰트 사용하기
① 웹 폰트란
웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 함께 저장해야함.
즉, 기본에 가지고 있던 웹 폰트를 사용했다면 웹 문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드해야함.
웹 폰트를 사용한 사이트에 사용자가 접속하면 웹 문서를 내려받으면서 웹 폰트도 사용자 시스템으로 다운로드됨.
결국 사용자 시스템에 없는 글꼴이라도 웹 문서를 만들때 사용한 글꼴을 내려받은 후 표시하므로
웹 제작자가 의도한 대로 텍스트를 보여 줄 수 있음.
② 웹 폰트 업로드하고 사용하기
구글 웹 폰트처럼 인터넷 사이트에서 제공해주는 경우에는 주로 링크해서 사용하지만,
그렇지 않은 글꼴이나 자신이 가지고 있는 TTF 폰트를 변환해서 사용하려면 직접 업로드해서 사용해야함.
컴퓨터에서 사용하는 글꼴은 트루타입(TrueType)이고 파일 확장자는 *.ttf임.
하지만 트루타입 글꼴은 파일 크기가 커서 웹에서 사용하기엔 적절하지 않았음.
그래서 웹에 적합한 여러 글꼴이 등장했는데 그중 EOT, WOFF, WOFF2 파일 등이 많이 쓰임.
웹 폰트가 준비되었다면 @font-face 속성을 사용하여 다음과 같이 웹 폰트를 정의함
기본형 : @font-face {
font-family: <글꼴 이름>;
src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, ....];
}
※ 웹 폰트 사용하기
가장 먼저 font-family 속성을 사용해 글꼴 이름을 만듦. 앞으로 이 글꼴은 이런 이름으로 사용하겠다는 뜻으로
되도록이면 글꼴 파일 이름과 같은 이름을 사용하는 것이 좋음.
src 속성에서는 사용할 글꼴 파일의 경로를 지정하는데 그 전에 local( ) 문을 사용해서 사용자 시스템에
해당 글꼴이 있는지 먼저 확인해야함. 만약 사용자 시스템에 글꼴이 없다면 WOFF 포맷으로 된 글꼴을 내려받아야함.
그리고 TTF 포맷은 다른 파일 형식보다 용량이 커서 대부분의 모던 브라우저에서 지원하는
WOFF 포맷을 먼저 선언하고 TTF 포맷은 그 후에 선언함. 다음은 Ostrich라는 글꼴의 웹 폰트를 사용하는 예제임.
이렇게 웹 폰트 파일을 준비해서 업로드한 후 사용할 수도 있지만 인터넷에서 무료로 제공하는 웹 폰트를 간단히 링크하여 사용할 수도 있음. (ex. 구글 폰트 사이트 fonts.google.com)
텍스트 관련 스타일
① 글자색을 지정하는 color 속성
웹 문서에서 문단이나 제목 등의 텍스트에서 글자색을 바꿀 때는 color 속성을 사용함.
color를 사용할 수 있는 속성값은 16진수나 rgb(또는 rgba), hsl(또는 hsla) 또는 색상 이름임.
기본형 : color : <색상>
※ 16진수로 색상을 표현하는 방법
웹 문서의 CSS에서 색상을 표현하는 첫 번째 방법은 #ffff00처럼 #기호 다음에 6자리의 16진수로 표시하는 것임.
(16진수는 0~f까지 16개의 숫자로 크기를 나타냄. 가장 작은 수는 0이고, 가장 큰 수는 f임.)
6자리의 16진수는 앞에서부터 두 자리씩 묶어 #RRGGBB로 표시함.
여기서 RR 자리에는 빨간색, GG 자리에는 초록색, BB 자리에는 파란색의 양을 표시함.
각 색상마다 하나도 섞이지 않았음을 표시하는 00부터 해당 색이 가득 섞였음을 표시하는 ff까지 사용할 수 있음.
즉, 16진수의 색상값은 #000000(검은색) 부터 #ffffff(흰색)까지 표현할 수 있음.
만약 색상값이 #0000ff처럼 두 자리씩 중복될 경우 #00f로 줄여서 표기할 수도 있음.
(색상을 나타내는 16진수의 값을 모두 기억하고 있을 수 없으므로 주로 색상값을 추출해 주는 컬러 피커를 사용함.)
※ hsl과 hsla로 색상을 표현하는 방법
CSS3에서는 hsl을 사용해서 색상을 표기할 수 있음. hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말임.
그리고 hsla는 hsl에 alpha(불투명도)를 추가한 것을 의미함.
색상은 각도를 기준으로 색상을 둥글게 배치한 색상환으로 표시함.
0도와 360도에는 빨간색, 120도에는 초록색, 240도에는 파란색이 배치되고 그 사이사이에 나머지 색이 배치됨.
채도는 퍼센트(%)로 표시하는데 아무것도 섞이지 않으면 채도가 가장 높은 상태임.
채도에서 0%는 회색 톤이고, 100%는 원래 색으로 표시됨.
명도 또한 퍼센트(%)로 표시하는데 0%는 가장 어둡고 50%는 원래 색으로, 100%는 흰색으로 나타남.
ex. 빨간색 = hsl(0,100%, 50%) 여기에 알파값을 더해 hsl(0,100%, 50%, 0.5)라고 하면 절반 쯤 투명하게 만듦.
※ 색상을 영문명으로 표현하는 방법
색상을 표기하는 또 다른 방법으로 red, yellow, black처럼 잘 알려진 색상 이름을 사용하는 것임.
※ 다양한 방법으로 글자색 지정하기
<h1> 태그의 글자색은 16진수로, <p> 태그의 단락은 색상 이름으로, accent 클래스 스타일은 hsl 표기법으로 글자색 지정.
※ rgb와 rgba로 표현하는 방법
CSS에서는 색상을 지정할 때 주로 rgb와 rgba로 표현함.
rgb는 red, green, blue의 줄임말로 앞에서부터 차례대로 빨간색, 초록색, 파란색 값이 들어 있는 값을 나타냄.
하나도 섞이지 않았을 때는 0, 가득 섞였을 때는 255로 표시하며, 그 사이값으로 각 색상의 양을 나타냄.
ex. rgb 표기법으로 파란색 지정하기
h1 { color: rgb(0, 0, 255); }
그리고 hsla를 사용해서도 불투명도를 지정할 수 있지만
rgba를 사용하면 rgb로 표현한 색상에 불투명도를 지정할 수도 있음.
rgba에서 맨 끝쪽의 a, 즉 알파는 불투명도의 값을 나타내며 0~1의 값 중에서 사용할 수 있음.
1은 완전히 불투명한 것이고 0.9, 0.8처럼 숫자가 작아질수록 조금씩 투명해지다가 0이되면 완전히 투명해짐.
ex. rgba 표기법으로 불투명도 지정하기
h1 { color: rgba(0, 0, 255, 0.5); }
※ rgb, rgba 표기법으로 글자색 표현하기
② 텍스트를 정렬하는 text-align 속성
text-align 속성은 문단의 텍스트 정렬 방법을 지정함.
text-align 속성을 사용하면 왼쪽, 오른쪽, 양쪽, 가운데 정렬 등을 웹 문서에서도 지정할 수 있음.
기본형 : text-align: start | end | left | right | center | justify | match-parent
※ text-align의 속성값
| 종류 | 설명 |
| start | 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬함. |
| end | 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬함. |
| left | 왼쪽 정렬 |
| right | 오른쪽 정렬 |
| center | 가운데 정렬 |
| justify | 양쪽 정렬 |
| match-parent | 부모 요소를 따라 문단을 정렬함. |
※ 텍스트 정렬하기
정렬 방법을 지정하지 않을 경우 왼쪽 정렬이 기본임.
왼쪽 정렬에서는 오른쪽에 여백이 생기지만, 양쪽 정렬에서는 오른쪽에 여백이 생기지 않는다는 차이가 있음.
③ 줄 간격을 조절하는 line-height 속성
한 문단이 두 줄을 넘기면 줄 간격이 생김. 이때 line-height 속성을 이용하면 줄 간격을 원하는 만큼 조절할 수 있음.
줄 간격은 정확한 단위로 크깃값을 지정하거나 문단의 글자 크기를 기준으로 몇 배수인지 백분율로 지정할 수도 있음.
예를 들어 글자 크기가 12px인 문단의 줄 간격을 2.0으로 했다면 실제 줄 간격은 글자 크기의 2.0배인 24px이 되며
백분율도 같은 식으로 계산함. 보통 줄 간격은 글자 크기의 1.5~2배면 적당함.
ex. 줄 간격 24px로 지정하기
p { font-size: 12px; line-height: 24px; }
p { font-size: 12px; line-height: 2.0; }
p { font-size: 12px; line-height: 200%; }
※ 줄 간격 지정하기
첫 번째 단락에는 줄 간격 지정 X, 두 번째 단락에는 0.7로 좁게 지정, 세 번째 단락은 2.5로 넓게 지정
※ 텍스트를 세로로 가운데 정렬하기
가로로 가운데 정렬은 되어있는데 세로로 가운데 정렬은 되어있지 않은 경우
line-height의 속성값을 추가하여 영역의 높이를 나타내는 height의 속성값과 똑같이 지정하면 됨.
④ 텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성
text-decoration 속성은 텍스트에 밑줄을 긋거나 취소선을 표시함.
그리고 텍스트에 하이퍼링크를 적용하면 기본적으로 밑줄이 생기는데 text-decoration 속성을 사용하여 없앨 수 있음.
※ 텍스트에 줄 표시하기
⑤ 텍스트에 그림자 효과를 추가하는 text-shadow 속성
CSS를 사용하여 텍스트에 그림자 효과도 줄 수 있음.
그림자 효과는 본문에서 자주 사용하면 지저분해 보이지만
사이트 제목처럼 강조해야 할 글자에 사용하면 눈에 띄게 만들 수 있음.
text-shadow 속성은 텍스트에 그림자 효과를 추가해 텍스트를 좀 더 입체감 나게 보여 줄 수 있음.
기본형 : text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>
※ text-shadow의 속성값
| 종류 | 설명 |
| <가로 거리> | 텍스트부터 그림자까지의 가로 거리로 필수 속성임. 양숫값은 글자의 오른쪽, 음수값은 글자의 왼쪽에 그림자를 만듦. |
| <세로 거리> | 텍스트부터 그림자까지의 세로 거리로 필수 속성임. 양숫값은 글자의 아래쪽, 음수값은 글자의 위쪽에 그림자를 만듦. |
| <번짐 정도> | 양숫값을 사용하면 그림자가 모든 방향으로 퍼져 나가므로 그림자가 크게 표시됨. 반대로 음숫값은 그림자가 모든 방향으로 축소되어보임. 기본값은 0. |
| <색상> | 한 가지만 지정할 수도 있고 공백으로 구분해 여러 색상을 지정할 수도 있음. 기본값은 현재 글자색. |
※ 텍스트에 그림자 효과 추가하기
⑥ 텍스트의 대소 문자를 변환하는 text-transform 속성
text-transform 속성은 텍스트를 대소 문자 또는 *전각 문자로 변환함.
이 속성은 한글에는 영향을 미치지 않고 영문자에만 적용됨.
*전각 문자 : 가로와 세로의 길이 비율이 같은 글자를 말하며, '반각 문자'는 가로와 세로의 길이 비율이 1:2인 글자를 말함.
※ text-transform의 속성
| 종류 | 설명 |
| capitalize | 첫 번째 글자를 대문자로 변환 |
| uppercase | 모든 글자를 대문자로 변환 |
| lowercase | 모든 글자를 소문자로 변환 |
| full-width | 가능한 한 모든 문자를 전각 문자로 변환 |
※ 글자 일부 또는 전체를 대문자로 바꾸기
⑦ 글자 간격을 조절하는 letter-spacing, word-spacing 속성
letter-spacing 속성은 글자와 글자 사이의 간격을 조절하고
word-spacing 속성은 단어와 단어 사이 간격을 조절하는데,
CSS에서는 주로 letter-spacing 속성을 사용해 자간을 조절함.
이 2가지 속성은 px, em과 같은 단위나 퍼센트(%)로 크깃값을 조절함.
※ 글자 간격 조절하기
목록 스타일
① 불릿 모양과 번호 스타일을 지정하는 list-style-type 속성
순서 없는 목록의 경우 목록 앞에 다양한 불릿 모양을 넣을 수 있고, 순서 목록에서는 번호 스타일을 지정할 수 있음.
이때 list-style-type 속성을 사용하여 불릿의 모양이나 번호 스타일을 지정할 수 있음.
※ 목록 스타일의 속성값
| 종류 | 설명 | 예시 |
| disc | 채운 원 모양 | ● |
| circle | 빈 원 모양 | ○ |
| square | 채운 사각형 모양 | ■ |
| decimal | 1부터 시작하는 10진수 | 1, 2, 3, ... |
| decimal-leading-zero | 앞에 0이 붙는 10진수 | 01, 02, ... |
| lower-roman | 로마 숫자 소문자 | ⅰ, ⅱ, ⅲ, ... |
| upper-roman | 로마 숫자 대문자 | Ⅰ, Ⅱ, Ⅲ, ... |
| lower-alpha 또는 lower-latin | 알파벳 소문자 | a, b, c, ... |
| upper-alpha 또는 upper-latin | 알파벳 대문자 | A, B, C, ... |
| none | 불릿이나 숫자를 없앰. |
※ 순서 없는 목록과 알파벳 대문자 목록 지정하기
② 불릿 대신 이미지를 사용하는 list-style-image 속성
list-style-type 속성에서 바꿀 수 있는 불릿의 유형은 3가지뿐이어서 단조로운 편임.
list-style-image 속성을 이용하면 불릿을 원하는 이미지로 바꿀 수 있음.
이 경우 불릿에 들어갈 이미지는 불릿 크기만큼 작아야 좋음.
기본형 : list-style-image: <url(이미지 파일 경로)> | none
→ 속성값으로 none을 사용하면 이미지를 사용하지 않고 list-style-image 속성에서 지정한 형태로 표시함.
※ 불릿 대신 이미지 사용하기
③ 목록을 들여 쓰는 list-style-position 속성
list-style-position 속성을 사용하면 불릿이나 번호의 위치를 들여 쓸 수 있음.
속성값으로 inside를 지정하면 불릿이나 번호가 실제 내용이 시작되는 위치보다 좀 더 안으로 들여써진 듯한 효과가 남.
이 속성은 텍스트 문단 사이에 있는 목록을 더 쉽게 구분해 줌.
기본형 : list-style-position: inside | outside;
※ list-style-position의 속성값
| 종류 | 설명 |
| inside | 불릿이나 번호를 기본 위치보다 안으로 들여 씀. |
| outside | 기본값 |
※ 목록 들여쓰기
④ 목록 속성을 한꺼번에 표시하는 list-style 속성
list-style 속성을 사용하면 list-style-type, list-style-image, list-style-position 속성을 한꺼번에 표시할 수 있음.
그래서 다음과 같이 소스를 간단히 줄여서 사용할 수 있음.
※ 불릿 없애기 → 속성 줄여서 표시하기
ul {list-style-type: none;} → ul {list-style: none;}
※ 소문자 목록 만들고 들여쓰기 → 속성 줄여서 표시하기
ol { ol {
list-style-type: lower-alpha; → list-style: lower-alpha inside;
list-style-position: inside; }
}
목록을 사용하여 세로 메뉴 만들기
① CSS 소스 추가하기
<style>과 </style> 사이 CSS 소스 추가 후 저장하기
② 결과 확인하기
불릿이 사라지고 각 항목에 마진과 패딩, 테두리가 추가되어 웹 사이트의 세로 메뉴 형태가 만들어짐.
표 스타일
① 표 제목의 위치를 정해 주는 caption-side 속성
표 제목은 <caption> 태그를 이용해 캡션으로 표시함.
캡션은 기본적으로 표 위쪽에 표시되지만 caption-side 속성을 이용하면 표 아래쪽으로 옮길 수 있음.
기본형 : caption-side: top | bottom
※ caption-side의 속성값
| 종류 | 설명 |
| top | 캡션을 표 윗부분에 표시함. 기본값 |
| bottom | 캡션을 표 아랫부분에 표시함. |
② 표에 테두리를 그려 주는 border 속성
표 테두리는 border 속성을 사용하는데 표 바깥 테두리와 셀 테두리를 각각 지정함.
※ 표 테두리 스타일 지정하기
border 속성을 이용해 표 바깥 테두리는 1px의 검은색 실선으로, 셀테두리는 1px의 검은색 점선으로 표시하면
표 전체의 바깥 테두리와 각 셀의 테두리가 모두 표시되어 화면에서는 테두리가 두 줄 그려진 것처럼 보임.
③ 셀 사이의 여백을 지정하는 border-spacing 속성
표와 셀에 따로 테두리를 지정하면 셀과 셀 사이에 여백이 조금 생김.
border-spacing 속성을 사용하면 셀과 셀 사이의 여백을 조절할 수 있음.
기본형 : border-spacing: 수평거리 수직거리
border-spacing 속성값은 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타내는데,
두 값이 같다면 1개만 지정해도 됨.
④ 표와 셀 테두리를 합쳐 주는 border-collapse 속성
<table> 태그와 <td> 태그에서 border 속성을 사용하면 셀과 셀 사이에 여백이 생기면서 두 줄로 표시됨.
이때 두 줄로 그냥 둘 것인지 아니면 합쳐서 하나로 표시할 것인지 결정하는 것이 border-collapse 속성임.
이 속성은 <table> 태그에 적용되는 스타일에만 지정하면 됨.
※ border-collapse의 속성값
| 종류 | 설명 |
| collapse | 표와 셀의 테두리를 합쳐 하나로 표시함 |
| separate | 표와 셀의 테두리를 따로 표시함. 기본값임. |
※ 표 스타일 다양하게 적용하기
표의 바깥 테두리는 검은색 실선으로, 셀의 테두리는 검은색 점선으로 지정한 후 border-collapse를 이용해 합치기
'코딩 국비 학원 > Do it! HTML+CSS+자바스크립트' 카테고리의 다른 글
| [Do it! HTML+CSS+자바스크립트]이미지와 그러데이션 효과로 배경 꾸미기 (0) | 2022.12.19 |
|---|---|
| [Do it! HTML+CSS+자바스크립트]레이아웃을 구성하는 CSS 박스 모델 (0) | 2022.12.18 |
| [Do it! HTML+CSS+자바스크립트]CSS의 기본 (0) | 2022.12.15 |
| [Do it! HTML+CSS+자바스크립트]입력 양식 작성 (0) | 2022.12.15 |
| [Do it! HTML+CSS+자바스크립트]웹 문서에 다양한 내용 입력 (0) | 2022.12.14 |
