오늘은 본격적인 외관 만들기에 앞서 알아두면 좋을 html,css,javascript들에 대한 정보들을 예제와 함께 다뤄볼 것이다.
| css | html | javascript |
| 1.{ } 꼴 2.css의 속성들 3.html과 연결시키기 4.html내에서 css사용하기(<style>태그) 5.가상 요소 ::after |
1.<link>태그의 속성 rel,href 2.<meta>태그의 속성 name,width,initial-scale |
1.var,let,const의 차이 2.화살표함수 3.현재 날짜, 시간 가져오기 4.html과 연결시키기 5.setInterval,setTimeout함수 6.wrap으로 감싸 가져가기 7.document.querySelector() 함수 |
위는 오늘 살펴볼 html,css,javascript의 이모저모다.
오늘은 위 테이블에서 굵은 글씨에 해당하는 부분을 공부해 볼 것이다.
일단 첫번째 예제부터 살펴보겠다.
1.첫번째 예제(css+html)
이 예제에서 어떤 블록은 창을 꽉 차게, 어떤 블록은 딱 글자 공간만큼, 어떤 블록은 높이도 갖게 생성되었다.
css,html은 외관을 꾸미는 요소이기 때문에 이러한 블록들의 배치를 어떻게 하는지 아는 것이 중요하다.
1.css 코드 (ex1.css)
* {
box-sizing: border-box;
font-family: 'Sans-serif'; /*(1)*/
}
html, body {
padding: 0;
margin: 0; /*(2)*/
}
div {
color: #fff;
border: 3px dashed blue; /*(3)*/
}
#wrap {
border: none; /*(4)*/
}
.block {
display: block;
background: red;
}
.inline-block {
display: inline-block;
background: green;
height: 100px;
}
.inline {
display: inline;
background: black;
height: 100px;
}
.none {
display: none;
background: blue;
}
.hidden {
display: block;
visibility: hidden;
background: yellow; /*(5)*/
}<코드 설명> (주석 번호)
|
(1)-1 css에서는 모든 태그들에 해당하는 속성을 {}라는 중괄호 안에 설정하는데, 이 앞에 *이 붙으면 모든 태그에 해당하는 속성임을 의미한다. (1)-2 box-sizing엔 border-box와 content-box 속성이 있다. content-box는 box의 사이즈를 box내의 content(내용)으로 설정해주고, border-box는 box의 사이즈를 box크기 자체로 설정해준다. 따라서 보통은 border-box를 많이 쓴다. 더 자세한 설명은 여기 ([CSS] Box Sizing - content box, border box (tistory.com))에 자세히 나와있다. (1)-3 font-family는 내가 적용하고자 하는 폰트 모양을 지정해준다. 이는 구글링하면 많이 나온다.
(2)-1 html,body{} 라는 것은 html 내에서 html,body라는 이름에 해당하는 태그의 속성을 {} 안의 내용으로 바꿔준다는 뜻이다. (2)-2 padding과 margin은 둘 다 여백을 구성하는 속성이라는 공통점이 있다. 차이는 padding은 블록 내에서 글자와의 여백, margin은 블록 외에서 배경과의 여백을 구성한다는 차이가 있다. 자세한 설명은 여기([HTML/CSS] 패딩과 마진차이 (tistory.com))에서 알기 쉽게 나와있다.
(3)-1 div라는 태그의 속성 값을 구성한다는 것을 의미하는 div{}에서 color은 글씨의 색깔을 말한다. 이로 인해 모든 글씨의 색이 흰 색으로 설정된 것을 알 수 있다. (3)-2 border은 모든 div태그의 블록 테두리를 설정해주는 속성이다. 3px dashed blue 라는 것은 차례로 3px굵기의 띄엄띄엄한 점선 모양의 파란색 테두리를 의미한다. border의 여러가지 속성들은 (CSS / border / 테두리 만드는 속성 – CODING FACTORY)여기를 참고하길 바란다.
(4) {}앞에 #이 오면 이는 html에서 id라는 태그에 해당하는 css 속성을 지정해주고 싶을 때 쓴다는 의미이다. 따라서 html에 wrap이라는 id의 태그가 있으면 이에 적용된다.
(5)-1 (4)에서의 #와 달리 {} 앞에 .이 오면 는 html에서 class 태그에 해당되는 css 속성을 지정해주고 싶을 때 사용된다. (5)-2 display속성은 block이 보여지는 (display)형태를 지정해주는 속성이다. 크게 네 가지가 있다. block:웹페이지의 가로 넓이가 꽉 차도록 블록이 설정됨 inline-block:블록 내의 글자 크기가 블록 크기와 딱 맞게 설정 됨, height,width 등의 공간 정보와 같이 쓰일 수 있음 inline: 블록 내의 글자 크기가 블록 크기와 딱 맞게 설정 됨, height,width 등의 공간 정보가 무시됨. none:눈에 보이지도 않고 공간 차지도 하지 않음 (5)-3 background 속성은 block의 배경 색상을 지정해준다. (5)-4 visivility속성이 hidden이면 display 속성이 block일 때 블록 크기는 지정되지만 눈에 보이지는 않는다 (none과는 차이) -> 그림에서의 초록색 블록과 검정색 블록 사이를 차지. |
이제 html코드를 살펴볼 것이다.
2.html 코드 (ex1.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--(1)-->
<title>Document</title>
<link rel="stylesheet" href="./ex1.css"> <!--(2)-->
</head>
<body>
<div id="wrap">
<div class="block">I'm block</div>
<div class="none">I'm none. I'm invisible and I don't have any space</div>
<div class="inline-block">I'm inline-block</div>
<div class="hidden">I'm hidden block. Although I'm invisible, I have my space</div>
<div class="inline">I'm inline</div>
</div>
</body>
</html>보다시피 css에서 대부분의 style속성을 지정해 준 덕분에 html코드는 비교적 간단하다.
<코드 설명> (주석 번호)
|
(1) 코드의 뜻은 "보이는 창(viewport)의 너비(width)를 장치의 너비로(device-width), 초기 화면 배율을(initial-scale) 1.0으로 설정한다는 의미이다. 그냥 눈에 보이는 비율 그대로 바꾸지 않고 출력함을 의미한다. (2) 코드의 뜻은 "맨 위쪽 루트주소로부터 하나 아래에 위치한 ex1.css 라는 링크(href)는 ex1.html를 꾸며주는(stylesheet) 관계(rel)이다." 라는 뜻이다. |
오늘은 여기까지만 다뤄보았다. 다음 시간에는 오늘 다루지 못했던 부분에 대해 설명하고 그 다음 시간에는 더 쓰기 간편하고 퀄리티 좋은 외관 만들기 방법에 대해 공부해보기로 하겠다!
더 자세히 알고싶은 부분은 덧글로 남겨주시면 감사하겠습니다 ~ :):)
'FRONT > Node.js' 카테고리의 다른 글
| Node.js로 싸이월드 만들기(3+4일차-마무으리) (0) | 2021.05.09 |
|---|---|
| Node.js로 싸이월드 만들기(2일차-Node.js이용해서 메뉴 클릭에 반응하도록) (0) | 2021.05.03 |
| Node.js로 싸이월드 만들기 (1일차-계획짜기+html/css로 디자인) (0) | 2021.05.01 |
| 1.github 시작하기 (0) | 2021.02.09 |