HTML(HyperText Markup Language)
- HTML은 웹 페이지의 의미와 구조를 정의할 때 사용한다.
openning tag: 해당 콘텐츠를 표현하기 위해 시작하는 태그closing tag: 그런 콘텐츠를 끝내게 해주는 태그self-closing tag: 태그 내부에 내용이 없다면 와 같이 표현이 가능하다.
<br/>
<img src="logo.jpg"/> ...자주 사용하는 <태그>
<div>: 콘텐츠 크기와 상관없이 한 줄을 차지하고 줄바꿈이 자동으로 행한다.<span>: div와 달리 콘텐츠 크기만큼 공간이 할당된다.<ul>: unordered list, 순서가 없는 목록<ol>: ordered list, 순서가 있는 목록<li>: 목록의 내용이 되는 태그<input>: 다양한 입력 데이터를 받을 수 있게 하는 태그type="text"type="password"type="date": 날짜를 입력할 수 있다.type="file": 파일을 컨트롤할 수 있다.type="radio": checkbox 타입과 달리 하나만 선택이 가능하다.type="checkbox"
- HTML을 class, id로 semantic하게 분류하고, semantic tag를 적재적소에 사용하여 의미를 부여한다.
- semantic tag의 남용 또한 semantic 하지 않음을 이해해야 한다.
CSS(Cascading Style Sheets)
CSS는 HTML로 잘 짜놓은 구조에 디자인을 부여하기 위한 도구이다.
-
CSS를 HTML에 적용하는 세 가지 방법
-
Inline : 특정 태그에 직접 style을 적용
<h1 style="color: red; font-style: italic">Hi!<h1/> -
HTML 내부
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>title</title> <style> h1 { color: red; font-style: italic; } </style> </head> <body> <h1>Hello!</h1> </body> </html> -
HTML 외부
- 태그를 이용
- css 확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>title</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello!</h1> </body> </html>h1 { color : red; font-style: italic; }
-
Selector
- 특정 태그나, 요소 또는 전체에 대해 디자인을 선택하는 요소
종류
-
전체 선택자
- 모든 태그에 같은 속성을 적용한다.
* {color: red;} -
태그 선택자
- 특정 태그를 선택하여 속성을 적용한다.
div {background: green;} -
클래스 선택자
- 클래스의 속성 값이 같은 태그를 찾아 선택하여 적용한다.
.divClass {color: burlywood;} -
ID 선택자
- 클래스 선택자와 유사합니다.
- 하지만 단 한 번만 스타일을 적용할 때에는 ID 선택자를 사용하는게 좋다.
- 클래스는 글자색이나 굵기 등, 다른 곳에도 적용할 수 있는 스타일을 지정하고, ID 선택자는 요소의 배치 방법을 지정할 때 자주 사용한다.
#div1 {color: burlywood;}
부모 자식 관계
div #span1 {color: green; background: balck;}- 태그이름 사이에 공백을 넣은 선택자는 부모 태그 밑(하위)에 있는 태그에 스타일을 적용시킨다.
- 태그 뿐 만 아니라 클래스, 아이디를 사용할 수 있다.
부모 자식 관계2
- 공백 대신
>라는 특수 문자를 사용하면 부모 자식 관계 사이에 태그가 없는 부모-자식 태그간 관계만 적용하는 방법도 있다. - 부모 자식 사이에 다른 태그가 있다면 적용이 안된다.
div > #span1{color: greenyellow; background: black;}여러 태그에 같은 스타일을 동시에 적용하는 방법
- 태그들 사이에
,를 이용하면 된다. - 쉼표를 이용하면 같은 스타일을 중복해서 적을 일이 없어 코드가 간결해진다.
BOX
- Margin : 외부 여백
- Padding : 내부 여백
Position
static: 기본 위치, 기본 위치는 왼쪽 상단을 기준으로 [0, 0]relative: static의 기본 위치에서 부터 계산하여 배치된다.absolute: 부모의 기준을 잡아 그 기준의 절대적인 위치fixed: 브라우저 화면의 상대 위치- 즉, 화면이 바뀌더라도 고정된 위치를 설정이 가능하다.
참고 사이트
반가워요! 사람을 도우는 웹 개발자로 성장하기! :)