728x90
반응형
2021.06.29 - [분류 전체보기] - [Node.js] 웹서버프로그래밍 기초 #2
[Node.js] 웹서버프로그래밍 기초 #2
2021.06.28 - [스마트한 코딩 공부] - [Node.js] 웹서버프로그래밍 기초 #1 [Node.js] 웹서버프로그래밍 기초 #1 1. 웹 서버란? 1.1 하드웨어, 소프트웨어 두가지로 구분할 수 있다. 하드웨어 웹 사이트의 컴
smartseoullife.tistory.com
저번까지는 HTML에서 사용되는 tag들에 대해서 알아보았다. 이번에는 HTML의 각 요소의 style을 설명하는 CSS에 대해서 알아보자.
1. CSS란
CSS(Cascading Style Sheets)는 HTML이나 XML과 같은은 구조화된 문서를 화면에 어떻게 보여줄지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소의 style을 정의하여 화면 등에 어떻게 보여주면 되는지 브라우저에게 설명하기 위한 언어이다. 간단하게 설명하면 PPT에서 표를 만들거나 화면을 구성할 때 우리가 자주 쓰는 "홈" 이나 "삽입" 부분 등에서 정하는 디자인을 정하는 것과 비슷하다.
2. CSS 적용방법
- Link Style : 외부에 있는 CSS 파일을 로드하는 방식 ( 이미 만들어놓은 디자인 구성을 불러올 때 사용한다.)
- Embedding Style : HTML 내부에 CSS를 포함시키는 방식
- Inline Style : HTML 요소의 style에 CSS를 기술하는 방식
3. CSS 구성
p {color : white; font-size : 12px;}p 태그의 글자 크기는 12px, 색상은 white로 지정한다는 명령어이다.
p에 해당하는 부분이 설렉터(selector)이고 HTML에서 어떤 요소를 선택할지를 의미한다. p로 정의된 모든 요소에 적용된다. color 부분이 프로퍼티(property)로 속성을 지정하고 white에 그 속성 값을 정의한다.
4. 셀렉터(selector) 적용 방법
- * : 문서내의 모든 요소에 적용
- 태그명 : 지정된 태그명을 가지는 요소만 적용
- #id 값 : id 속성 값과 일치하는 요소에 적용. id 속상값은 중복될 수 없음!!
- class 값 : class 값이 일치하는 요소에 적용. class 값은 여러개 지정이 가능
- 복합 설렉터 : 지정된 태그 하위 요소의 태그 중에서 선택적으로 적용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
* {color : red;} /* 문서 내의 모든 요소에 적용*/
h1 { color : red; } /*Embedding Style이자 tag Selector*/
p {background : aqua; }
#p1 { color : yellow;} /* #id 속성 값을 이용한 Selector */
.text-center { text-align : center;} /*Class를 이용한 Selector */
.text-large { font-size : 200%;}
.text-blue { color : blue;}
</style>
</head>
<body>
<h1>Hellow world</h1>
<p>Embedding Style</p>
<p style = "background: green">Inline Style</p> <!-- Inline Style CSS-->
<p id = "p1">selector #id</p> <!-- id값을 이용한 Selector-->
<p class = "text-center text-align text-blue"> selector class</p>
</body>
</html>5. CSS 단위
5.1 크기
- CSS에서 대표적으로 사용하는 크기 단위는 px, em, %이다
- px 는 절대값이고 em, %는 상대값이다. 일반적으로 16px, 1em, 100%를 사용한다.
- px : px는 화소 1개의 크기를 뜻한다. 해상도에 따른 크기는 상대적이지만 해상도 안에서는 절대값을 가진다.
- % : 지정된 사이즈에 상대적인 사이즈를 설정한다.
- em : 배수의 단위로 상대적임. 상위 요소에 적용하면 하위 요소 단계마다 배수로 영향을 미친다. rem을 사용하면 최상위 요소의 사이즈를 기준으로 모든 크기를 맞춘다.
5.2 Viewport
- 말 그대로 Display상의 표시 영역(눈에 보이는 부분)을 뜻합니다. 우리가 인터넷 창을 조절하면 그에 따라 움직이는 것이 viewport 이다. 그러므로 상대적인 단위이고 반응형 웹에서 자주 사용한다.
vw viewport 너비의 1/100 vh viewport 높이의 1/100 vmin viewport 너비, 높이 중 작은 쪽의 1/100 vmax viewport 너비, 높이 중 큰 쪽의 1/100 <!DOCTYPE html> <html> <head> <style> body{ margin: 0px; } .box{ width: 50vw; /* Viewpoint 너비의 1/100 을 의미, 반응형 웹*/ height : 100vh; /* Viewpoint 높이의 1/100 을 의미, 반응형 웹*/ text-align: center; font-size: 3rem; /* 최상위 요소의 사이즈를 기준으로 하는 em r은 root*/ color : white; } .box1{ background-color : red; } .box2{ background-color : blue; } </style> </head> <body> <div class = "box box1"> box1 </div> <div class = "box box2"> box2 </div> </body> </html>
5.3 색상 표현
- 키워드나 수치를 사용하여 색을 표현할 수 있다. 방식은 아래와 같다.
HEX 코드 #000000 RGB(Red, Green, Blue) rgb(255, 255, 0) RGBA(Red, Green, Blue, Alpha) - Alpha 는 투명도 rgba(255, 255, 0, 1) HSL(Hue, Saturation, Lightness) hsl(0, 100%, 25%) HSL(Hue, Saturation, Lightness, Alpha) - Alpha 는 투명도 hsla(0, 100%, 25%, 1)
5.4 Box 영역
| Content | 텍스트나 이미지 등 실제 내용이 위치하는 부분 |
| Padding | 테두리 안쪽에 위치하는 내부 여백 부분 |
| Border | 테두리 부분 |
| Margin | 테두리 바깥에 위치하는 외부 여백 부분 |
<!DOCTYPE html>
<html>
<style>
div{
background-color: yellow;
width: 500px;
padding: 30px; /* 테두리 안쪽에 위치하는 내부의 영역 */
border: 10px solid blue; /* 테두리 영역 */
margin: 30px; /* 테두리 바깥에 위치하는 외부 여백의 영역 */
}
</style>
<body>
<div>
content
</div>
</body>
</html>5.5 너비, 높이 및 margin / padding
- 너비는 width, height 로 지정한다.
- margin 과 padding 은 내가 방향에 대하여 각각 지정이 가능하다.
- -top -right -left -bottom 4방향을 각각 지정하는 방법 외에 속성 하나만으로 4방향 지정가능
- 4개 값을 지정
- margin : 10px 20px 30px 40 x (top:10px, right:20px, left:30px, bottom:40px)
- 3개 값을 지정
- margin : 10px 20px 30 px (top:10px, right:20px, left:20px, bottom:40px)
- 2개 값을 지정
- margin : 10px 20px (top:10px, right:20px, left:20px, bottom:10px)
- 1개 값을 지정
- margin : 10px (top:10px, right:10px, left:10px, bottom:10px)
5.6 border(테두리) 속성
- border-style : 테두리 선의 스타일 지정 (dottedm dashed, solid, double, groove, ridge, inset, outset이 존재)
- border-width : 테두리 선의 두께를 지정 (border-style이 먼저 지정이 되있어야 함)
- border-color : 테두리 선의 색 지정
- border-radius 테두리 모서리를 둥글게 바꿀 때 (px, em, %를 시용)
<!DOCTYPE html> <html> <head> <style> div{ background-color: yellow; padding: 10px; margin: 10px; } .dotted{border-style: dotted;} .dashed{border-style: dashed;} .solid{border-style: solid;} .double{border-style: double;} .groove{border-style: groove;} .ridge{border-style: ridge;} .inset{border-style: inset;} .outset{border-style: outset;} .mix{border-style: dashed solid double groove;} </style> </head> <body> <div class ="dotted"> dotted </div> <div class ="dashed"> dashed </div> <div class ="solid"> solid </div> <div class ="double"> double </div> <div class ="groove"> groove </div> <div class ="ridge"> ridge </div> <div class ="inset"> inset </div> <div class ="outset"> outset </div> <div class ="mix" > mix </div> </body> </html>
728x90
반응형
'스마트한 개발 공부 > Node.js | Java | html' 카테고리의 다른 글
| [Node.js] Node.js에서 mysql을 이용하여 웹서비스 만들기 #1 (0) | 2021.07.05 |
|---|---|
| [Node.js] Node.js 로 간단한 웹서비스 만들기 #2 (1) | 2021.07.02 |
| [Node.js] Node.js 로 간단한 웹서비스 만들기 #1 (0) | 2021.07.02 |
| [HTML] 웹서버프로그래밍 기초 #2 (0) | 2021.06.29 |
| [HTML] 웹서버프로그래밍 기초 #1 (0) | 2021.06.28 |