애쉬아일랜드-악몽
HTML(Hyper Text Markup Language)
-
웹 페이지의 틀을 만드는 마크업 언어, 웹 페이지의 요소들을 구성하는 역할
-
HTML은 tag들의 집합
tag : 부등호 (< >)로 묶인 HTML의 기본 구성 요소, html 확장자 사용 -
TREE STRUCTURE
<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> Image는 닫는 태그가 없다
<a> Link 삽입
<ul>&<li> Unordered List & List Item 리스트 삽입
<input> Input(Text,Radio,Checkbox) 다양한 입력 폼 삽입
<textarea> Multi-line Text Input 줄 바꿈이 되는 입력 폼
<button> ButtonCSS(Cascading Style Sheets)
-
웹 페이지 구성 요소의 스타일을 정의하는 언어
-
검색창의 너비, 버튼의 크기, 구성요소를 어디에 위치 하는지 등
-
CSS를 HTML에 적용 하는 세가지 방법 :
1_ INLINE
HTML의 특정 태그에 직접 style을 적용
h1 태그에 style이라는 속성을 부여해서 적용
색상은 빨간색, 스타일은 기울임꼴임을 명시
<h1 style= "color: red; font-style: italic">Hello world<h1>2_ HTML 내부에 stylesheet 작성
<style> 태그 이용 : CSS라는 언어의 문법에 맞게 해석해서 처리하게끔 만드는 태그
보통 <head> 태그 안에 삽입, 태그를 선택하는 규칙(Selector)에 따라 일괄 적용
<head>
<title>Page title</title>
<style>
h1 {
color: red;
font-style: italic;
}
</style>
</head>3_ HTML 외부에 stylesheet 작성
<link> 태그 이용
css 확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입
_index.html_
<head>
<title>Page title</title>
<Link rel= "stylesheet" type = "text/css" href= "myFirstStyle.css"/>
</head>
_myFirstStyle.css_
h1 {
color : red;
font-style: italic;
}CSS SELECTOR
- css에서 요소를 선택하는 규칙
solution :
1_ 각각의 요소에 고유한 ID 속성을 이용, #identifier와 같이 #을 이용해 고유한 ID를 선택
_index.html_
<h1 id= "hello"> Hello world </h1>
<h1 id= "codestates> Code states </h1>
_myFirstStyle.css_
#hello { color : red; )
#codestates { color : blie;)2_ 종류(CLASS)를 만들고 ELEMENT에 CLASS 부여, 각기 다른 색의 특성을 가진 종류를 만들고, 해당 요소에 적용, 여러 태그에 class를 부여할 수 있으며, 한 태그에 여러 class 적용도 가능, .className과 같이 .(dot)을 이용해 class 선택
> _index.html_
<h1 class= "red underline"> Hello world </h1>
<h1 class= "blue"> Code States </h1>
_myFirstStyle.css_
.red { color : red; }
.blue { color : blue; }CLASS 선택자와 ID 선택자
class : 자유롭게 이름 붙임, 동일한 값을 갖는 element는 많음,
element가 여러 값을 가질 수 있음, 스타일의 분류(classification)에 사용
id : 자유롭게 이름 붙임, 문서 내에서 단 하나의 element가 유일한 값을 가짐, 중복되서는 안됨, 특정 element를 이름 붙이는데에 사용
- 여러개의 CLASS 값을 갖는 ELEMENT
공백 (whitespace)를 이용해, 한 element에 여러 class를 지정 할 수 있음
-좀 더 구체적인 것이 포괄적인것보다 우선순위가 높다
tag < clss < ID 우선순위 높은 순서
<h1 class= "impact red">Hello world</h1>
.impact (font-size: 2em; font-weight: bold;}
.red ( color : red; )display속성의 기본값
block level element : 화면 전체를 쓰는 태그
inline element : 자기 크기 만큼을 쓰는 태그
display:none; : 안보이게 하는 태그
CSS Box Model
padding : 테두리와 컨텐츠 사이의 여백
margin : 테두리와 테두리 사이의 간격
width: 폭 (컨텐츠의 크기)
border: 박스 선
그리드를 이용해서 레이아웃 짜기
<div> : division 태그는 한줄을 차지 (Block element)
<span> : 태그는 컨텐츠 크기만큼 공간을 차지한다 (inline element)
fr : 화면 전체를 쓰도록 자동으로 조정되는 단위
<style>
#grid {
border: 5px solid pink;
display:grid;
grid-template-columns: 150px 1fr;
}
</style>반응형 디자인 media query
화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 동작하게 된다.
<style>
div {
border: 10px solid green;
font-size: 60px;
}
@media(min-width: 800px) {
div {
display: none;
}
}
</style>