HTML & CSS
HTML과 CSS는 웹브라우저 상에서 화면에 보여지는 화면을 표현하는 도구
HTML
웹 페이지의 틀을 만드는 마크업 언어
tag들의 집합
(tag : <>로 묶인 HTML의 기본구성요소)
- tree 구조
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>Hello world</h1>
<div>Contents here
<span>Here too!</span>
</div>
</body>
</html>- self-closing tag
<img src= '넣을 이미지.png'> </img>
<img src= '속성.png' /> <meta charset="UTF-8" />
어디서든 한글이 잘 나올 수 있게 해주는 유니코드세팅, 이모지도 해당
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> 제목 </title>
</head>
<body>
hello world
<div> 이 태그는 div </div>
</body>
</html>-
div vs span
div 한줄, block
span 컨텐츠 크기 inline -
이미지 삽입
img 태그는 닫는 태그가 없다
<img scr = 'ㅇㅇ.png'> -
링크삽입
<a href = '주소'> -
텍스트 박스
- 기본형
- 기본형
<input type = "text" placeholder ="type here">- id, pw 입력창
<div>id <input type = "text" placeholder = 'id를 입력하세요'> </div>
<div>password <input type = "password" placeholder = '비밀번호는 6~10자'> </div>- textarea : 멀티라인 줄바꿈이 되는 입력창
- textarea : 멀티라인 줄바꿈이 되는 입력창
<textarea> </textarea>- 체크 박스
- 체크항목 생성 ex) ID 기억하기
- 체크항목 생성 ex) ID 기억하기
<input type = "checkbox">- 둘중 하나만 선택가능한 radio체크
name이라는 속성을 이용해서 같은그룹이름(하나의 보기)으로 묶어줘야 한다
선택 1
선택 2
- 둘중 하나만 선택가능한 radio체크
<input type = "radio" name = '선택1'>선택 1
<input type = "radio" name = '선택1'>선택 2- 버튼Join in
<button> Join in </button>CSS & SELECTOR
CSS란? 웹 페이지 구성 요소들의 스타일을 정의하는 언어
ex) 버튼의 너비, 사진의 크기, 위치, 글자의 색...
CSS를 HTML에 적용하는 방법
- inline : 특정 HTML 태그에 직접 style 적용
h1태그에 style이라는 속성을 부여
color는 빨간색, font-style은 기울임꼴Hello world
<h1 style="color: red; font-style: italic">Hello world<h1>- HTML 내부에 stylesheet 작성
보통<head>태그 안에<style>태그 삽입해 작성
태그를 선택하는 규칙(Selector)에 따라 일괄 적용
- HTML 외부에 stylesheet 작성
<link>태그 이용
css 확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" type="text/css" href="myFirstStyle.css" />
</head>
<body> myFirstStyle.css
h1 {
color: red;
font-style: italic;
}
/* 모든 h1 태그에 빨간색, 기울임꼴을 적용 */CSS SELECTOR
id / class selector
CSS에서 요소(element:의미를 갖는 하나의 구조)를 선택하는 규칙
Q. 만일 다음 문서에서 Hello world에는 빨간색, Code States에는 파란색을 적용하고 싶을 경우에 할 수 있는 방법?
<body>
<h1>Hello world</h1>
<h1>Code States</h1>
</body>A1. HTML 외부에 stylesheet 작성 ➡ myFirstStyle.css
h1 { color: red }A2. CSS SELECTOR
- id selector
#
각각의 ELEMENT에 고유한 ID를 부여
<h1 id="hello">Hello world</h1>
<h1 id="codestates">Code States</h1> #hello {
color: red;
}
#codestates {
color: blue;
}- class selector
.
.(dot)을 이용해 class 선택
그룹으로 묶어 스타일링 하고 싶은 여러 태그에 class를 부여할 수 있다.
한 태그에 여러 class적용도 가능하다.
<h1 class="red underline">Hello world</h1>
<h1 class="blue">Code States</h1>.red {
color: red;
}
.blue {
color: blue;
}
.underline {
text-decoration: underline;
}ID 선택자 vs CLASS 선택자
id #
- 자유롭게 이름 붙임
- 문서 내에서 단 하나의 element가 유일한 값을 가짐
- element는 단 하나의 값을 가짐
- 특정 element를 이름 붙이는 데 사용
class .
- 자유롭게 이름 붙임
- 동일한 값을 갖는 element는 많음
- element가 여러 값을 가질 수 있음
- 스타일의 분류(classification)에 사용
여러개의 class 값을 갖는 ELEMENT
- 공백(whitespace)를 이용해, 한 element에 여러 class를 지정할 수 있음
<h1 class="impact red">Hello world</h1> .impact { font-size: 2em; font-weight: bold; }
.red { color: red; }CSS POSITIONING & LAYOUT
-
layout 위치요소
확장방향 : 기본적으로왼쪽 ➜ 오른쪽,위 ➜ 아래로 확장
왼쪽 상단의 좌표가 (0, 0)
단위 : px 픽셀이나 % 퍼센트, em, rem 등
예) positioning- 좌상단에 붙어서 확장시작
left : 0px;
top : 0px; - 우하단에 10px씩 떨어져서 확장시작
right : 10px;
bottom : 10px;
- 좌상단에 붙어서 확장시작
-
display
각 요소는 고유의 크기를 가질 수 있다.
단, inline요소는 컨텐츠가 차지하는 크기로 고정- block : 한 줄을 다 차지하는 요소
ex)<div> - inline : 컨텐츠 공간만 차지하는 요소
ex)<span> - inline-block : 높이를 가지는 컨텐츠
- block : 한 줄을 다 차지하는 요소
-
Box 크기 속성
-
box-sizing : border-box;로 설정해놓는 편이 계산이 쉬워서 좋다magin의 width와 height를 설정한다.
width : @@; height: @@; -
content-box;는 실제컨텐츠의 너비와 높이
출처_codestates
-
-
위치 레이아웃
- static: 기본값 (좌에서 우 /상에서 하)
- relative: 기본값 + 상대적인 위치
- fixed: 브라우저 화면의 좌상단을 기준으로 절대적인 위치
- absolute: 부모 중 기준점이 있는 경우, 그 기준으로 절대적인 위치
- sticky: 기본적으로 relative 처럼 작동하나, 스크롤 영역을 벗어나면 fixed 처럼 작동
