코드 스테이츠 Pre 코스 여섯째 주 수강 후기.
이번 주차에선 프런트엔드 개발과정의 기초를 배웠다. HTML이나 CSS관련은 아예 몰라서 궁금했었는데 생각했던 것보다 재밌고 신기하고 귀찮다ㅋㅋㅋ
과제는 드디어 트위틀러. 어디서부터 시작해야 할지 잘 모르겠어서 예습만 하다가 이번 주 강의 이후부터 시작했다. 아직 완성한 건 아니지만 코드를 짜긴 했다. 문제는 이렇게 하는 게 맞는지 모르겠다는 것. 다른 사람들 코드를 보면 함수 구성 방식부터가 달라서 혼란스럽다. 에잉.. 일단 풀고 나서 생각해봐야지.
목차
1. HTML
2. CSS
01. HTML
<!DOCTYPE html> <!-- html문서의 시작에 꼭 써야 함. -->
<html> <!-- html의 시작태그 -->
<head> <!-- head의 시작태그. 문서의 메타데이터 선언함 -->
<title>문서의 제목</title>
</head> <!-- head 종료태그 -->
<body> <!-- body의 시작태그. 문서의 내용 -->
<h1>Hello world</h1> <!-- 크기에 따라 h1 ~ h6까지 있음 -->
</body> <!-- body의 종료태그 -->
</html> <!-- html의 종료태그 -->
자주 쓰이는 HTML 태그들
<div> | division. 범위가 한 줄인 컨텐츠 분할 요소 |
<span> | span. 범위가 작은 컨텐츠 분할 요소 |
<img> | image. 이미지를 불러옴 |
<a> | link. 링크 |
<ul>&<li> | unordered list & list item. 리스트 |
<input> | input(text, radio, checkbox). 여러 인풋 기능을 지원하는 태그 |
<textarea> | multi-line text input. 여러 줄을 입력받을 수 있는 텍스트라인. |
<button> | button. 버튼 |
index.html(위 태그들을 사용한 html 코드)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" /> <!-- 페이지의 문자 인코딩을 UTF-8로 선언-->
<!-- UTF-8: 유니코드를 위한 문자 인코딩 방식 중 하나 -->
<title>연습</title>
<link rel="stylesheet" type="text/css" href="tmpStyle.css">
</head>
<body>
<div>
ID <input type="text" placeholder="ID를 입력하세요"><br>
</div>
<div>
PASSWORD <input type="password">
</div>
<input type="checkbox" checked>아이디 저장
<input type="checkbox">자동로그인
<div>
<input type="radio" name="species"> 고양이
<input type="radio" name="species"> 개
<input type="radio" name="species" value="인간" checked> 인간
</div>
<textarea>/* 텍스트 입력 예제(줄바꿈 사용 가능) */</textarea><br>
<button>저장</button>
<div>
<a href="https://ram-t.tistory.com/" target="_blank">내블로그</a>
</div>
<h1>h1/ Hello world</h1>
<h2>h2/ Hello world</h3>
<h3>h3/ Hello world</h3>
<ul>
ul/
<li>
<div class="highlight">
div/ 이미지1
<img src="img1.jpg">
</div>
</li>
<li>
<span class="highlight">
span/ 이미지2
<img src="img2.jpg">
</span>
</li>
</ul>
</body>
</html>
tmpStyle.css(<div>와 <span>의 범위를 보기 위한 css)
div.highlight {
background-color: #5ee;
}
span.highlight {
background-color: #ee3;
}
순수 컨테이너로서 아무것도 표현하지 않음. 다른 요소 여럿을 묶어 class나 id 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시(lang 속성 사용)하는 등의 용도로 사용할 수 있다.
<span> 은 <div> 엘리먼트와 아주 유사하지만 <div>는 블록-단위 엘리먼트인 반면 <span> 은 인라인 엘리먼트이다.
02. CSS
- CSS(Cascading Style Sheets, 종속형 스타일 시트)
- 브라우저에서 웹페이지의 외형을 결정하는 선언형 언어.
- 하나의 스타일 선언은 속성과 그 값으로 이루어져 있음.
CSS를 HTML에 적용하는 방법
1. inline
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>연습</title>
</head>
<body>
<h1 style="color: blue; font-style: italic">h1/ Hello world</h1>
<h1>h1/ Hello world</h1>
</body>
</html>
첫 줄의 h1태그에 style이라는 속성을 부여한다.
2. HTML 내부에 stylesheet 작성
<style> 태그 이용. 보통 <head> 태그 안에 삽입한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>연습</title>
<style>
h1 {
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<h1>h1/ Hello world</h1>
<h1>h1/ Hello world</h1>
</body>
</html>
모든 h1태그에 style을 부여함.
3. HTML 외부에 stylesheet 작성
<link> 태그를 이용.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>연습</title>
<link rel="stylesheet" type="text/css" href="style.css"> <!-- 중요 -->
</style>
</head>
<body>
<h1>h1/ Hello world</h1>
<h1>h1/ Hello world</h1>
</body>
</html>
style.css
h1 {
color: blue;
font-style: italic;
}
위와 마찬가지로 모든 h1태그에 style을 부여함.
CSS 규칙조합이 어떤 요소들에 적용될지 정의.
- 형식 선택자: 주어진 이름과 일치하는 모든 요소를 선택.
- 문법: 요소명
- 예: input 은 모든 <input> 요소를 선택한다.
- 클래스 선택자: class 속성의 값을 사용하여 요소를 선택.
- 문법: .클래스명
- 예: .index 는 클래스명이 index인 모든 요소를 선택한다.
- ID 선택자: id 속성 값을 사용하여 노드를 선택. 문서 내에서 주어진 ID를 갖는 요소는 유일해야 함.
- 문법: #id명
- 예: #toc 는 id가 toc인 요소를 선택한다.
- 통괄 선택자: 모든 노드들을 선택
- 문법: * ns|* *|*
- 예: * 은 문서 내 모든 요소를 선택한다.
사용 예) 아래의 문서에서 Hello와 World에 다른 스타일을 적용하고 싶을 경우
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>연습</title>
<link rel="stylesheet" type="text/css" href="style.css">
</style>
</head>
<body>
<h1>Hello</h1>
<h1>world</h1>
</body>
</html>
style.css
h1 { color: red }
1. id 사용
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>연습</title>
<link rel="stylesheet" type="text/css" href="style.css">
</style>
</head>
<body>
<h1 id="hello">Hello</h1>
<h1 id="world">world</h1>
</body>
</html>
style.css
#hello { color: red; text-decoration: underline; }
#world { color: blue; }
2. class 사용
클래스는 한 태그에 여러 클래스를 적용할 수도 있다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>연습</title>
<link rel="stylesheet" type="text/css" href="style.css">
</style>
</head>
<body>
<h1 class="red underline">Hello</h1>
<h1 clalss="blue">world</h1>
</body>
</html>
style.css
.red { color: red; }
.underline { text-decoration: underline; }
.blue { color: blue; }
더 공부하기: [MDN] CSS를 이용한 HTML 스타일링 익히기
'JavaScript, HTML, CSS' 카테고리의 다른 글
[JS]06. setTimeout(), apply(), 함수의 type (0) | 2019.09.23 |
---|---|
[HTML, 코드스테이츠]02. DOM (0) | 2019.09.09 |
[JS, 코드 스테이츠]05. Closure, Parameter, new 키워드와 객체지향 JavaScript (0) | 2019.08.26 |
[JS, 코드 스테이츠]04. 변수의 전달, Scope (0) | 2019.08.23 |
[JS, 코드 스테이츠]03. Number Methods, Math Methods (0) | 2019.08.18 |