본 내용은 해당 강의 토대로 작성
수업 소개
01. 서비스가 주도하는 시대에 살아남는 법
- 무형의 서비스는 점차 늘어나고 있다.
- 웹은 모두를 이어주는 매개체
- 모바일 앱을 PWAs(Progressive Web Apps)가 대체할 것
- 웹과 앱의 장점을 결합
- All-in-One
02. 웹에 사용되는 언어
- HTML(Hyper Text Markup Language)
- 웹 사이트에 들어갈 내용을 담당
- CSS(Cascading Style Sheets)
- 웹 사이트의 스타일을 담당
- JavaScript
- 웹 사이트의 인터렉션(상호작용)을 담당
HTML 기초
01. HTML 기본 태그 정리
<!DOCTYPE> 선언
- HTML 파일을 쓸 때 가장 먼저 선언
- 웹 브라우저에게 HTML버전을 알려주는 역할
- 기본으로 최신 버전인 HTML5 를 사용
<title> 태그
- 페이지의 제목
- 브라우저의 탭이나 방문 기록에 나와 있는 것
<h1> ~ <h6> 태그
- heading
- 머리말 태그
- 숫자가 클 수록 작은 글자
<p> 태그
- 문단 태그
- 위, 아래로 여백이 있다.
<b> 태그
- 텍스트를 굵게
<i> 태그
- 이탤릭체
02. Phrase Tags
<b>태그와 <i> 태그는 단순히, 텍스트를 굵게하거나 이탤릭체로 만든다. 즉, 시각적인 특징만 가지고 있다. Pharase tag는 시각적인 특징 뿐만 아니라 의미도 담고 있다.
<strong> 태그
- 텍스트를 굵게
- 텍스트가 중요하다고 표시
<em> 태그
- 이탤릭체
- 텍스트를 강조
03. 한글 인코딩
- 어느 브라우저 환경에서나 한글이 정상적으로 나오도록 한다.
<meta carset = "utf-8">04. 옵셔널 태그
<html> 태그
- 태그 사이에 있는 것들이 html이라고 알려줌
<head> 태그
- 제목(title태그, meta태그), CSS, 자바스크립트가 들어가는 태그
<body> 태그
- 페이지에 나올 내용을 감싸는 태그
05. 링크
<a> 태그
- 링크를 만듦
- href 속성에 주소를 속성 값으로 준다.
- 새 창으로 보내기는 target = "_blank"
<a href="https://google.com" target="_blank"> 구글로 들어가기 </a>06. 이미지
<img> 태그
- src 속성의 값에 이미지의 링크나 파일 경로를 입력한다.
- width, height 속성으로 이미지의 크기 조절
<img src="이미지 링크/경로" width="300">CSS 기초
01. CSS 문법
<style>사이에 아래와 같은 문법으로 작성
스타일링 하고 싶은 요소 {
속성1 : 속성값;
속성2 : 속성값;
}
02. CSS 기본 속성 정리
font-size
- 폰트 크기 설정
- 주로 px단위 사용
text-align
- 텍스트 정렬
- 속성 값
- left, right, center
color
- 텍스트 색상
- 속성 값으로 색상 입력
margin
- 여백
- px 단위 사용
섹션
01. 클래스 (class)
- CSS로 특정 요소에 효과를 주고 싶을 때, 클래스를 지정하면 된다.
클래스 지정(HTML)
<태그 class = "클래스명"> < /태그>
클래스 설정(CSS)
.클래스명 {
속성 : 속성값;
}
예시
<style>
.red {
color : red;
}
</style>
<body>
<p class = "red">
이 텍스트는 빨간색
</p>
<p>
이 텍스트는 적용하지 않음
</p>
</body>02. 아이디 (id)
- 특정 요소에 아이디를 부여할 수도 있다.
아이디 지정(HTML)
<태그 id = "아이디명"> < /태그>
아이디 설정(CSS)
#아이디명 {
속성 : 속성값;
}
예시
<style>
#red {
color : red;
}
</style>
<body>
<p id = "red">
이 텍스트는 빨간색
</p>
<p>
이 텍스트는 적용하지 않음
</p>
</body>03. 클래스 vs 아이디
- 같은 클래스 이름을 여러 요소가 가질 수 있다.
- 같은 아이디를 여러 요소가 가질 수 없다.
- 한 요소가 여러 클래스를 가질 수 있다.
- 한 요소는 하나의 아이디만을 가질 수 있다.
- 한 요소가 하나의 아이디, 여러 개의 클래스를 가질 수 있다.
04. div 태그
- 요소들을 묶을 수 있는 태그
- 유연하고 다양한 방식으로 사용할 수 있음
- div단위로 CSS 설정 주기 가능
05. CSS 파일 따로 쓰기 / link로 연결
<head>태그에 아래를 입력하여 별도의 CSS파일과 연결할 수 있다.
<link href = "CSS 파일 주소" rel="stylesheet">- rel : 이 페이지와 CSS 파일과의 관계
06. CSS 작성 방식
- stye 태그 안에 작성
- 태그 내에 style 속성 주기
- CSS 파일 따로 쓰기 / link로 연결
느낀점
오랜만에 HTML/CSS를 복습했다.
'programming study > HTML, CSS' 카테고리의 다른 글
| [코드잇] HTML/CSS 핵심개념 (2)(2021.2.17) (0) | 2021.02.17 |
|---|---|
| [코드잇] HTML/CSS 핵심개념 (1)(2021.2.17) (0) | 2021.02.17 |
| [코드잇] HTML/CSS 시작하기 (2)(2021.2.11) (0) | 2021.02.11 |
| [생활코딩]WEB2-CSS (2020.11.30~12.1) (0) | 2020.12.05 |
| [생활코딩]WEB1-HTML & Internet (2020.11.28~29) (0) | 2020.12.04 |
