HTML & CSS

나연·2020년 4월 12일

CSS html

HTML & CSS

목록 보기

1/1

HTML

웹페이지의 틀을 만드는 마크업 언어
tag들의 집합 (tag: <> 부등호로 묶인 html의 기본 구성 요소)

Tree Structure

<!DOCTYPE html> 이 문서가 html 문서임을 명시
<html></html> html 시작 태그로, 문서 전체의 틀을 구성한다.
<head></head> 문서의 메타데이터를 선언하며 눈에 보이지 않는 영역이다.
<title></title> 문서의 제목, 브라우저의 탭에 보여진다.
<body></body> 문서의 내용을 담는 곳으로 사용자에게 보여지는 영역이다.
<h1></h1> heading을 의미하며, 크기에 따라 h1부터 h6까지 있다.
<div></div> content division을 의미하며, 줄바꿈이 된다.
<span></span> 줄바꿈이 없는 content 컨테이너

*Self-closing tag도 있어서 다음과 같이 표현 가능하다.

<img src = "codestates-logo.png" />

많이 사용되는 태그

<div>:division vs. <span>:span
div태그는 한 줄을 차지한다.
span태그는 컨텐츠 크기만큼 공간을 차지한다.

<img>:이미지 삽입 (self-closing tag)

<img src = "http://image.jpg">
     속성

<a>:링크 삽입

<a href="http://naver.com">네이버</a>

<ul>:unordered list,<li>:list,<ol>:ordered list

<input>,<textarea>:다양한 입력 폼

<input type = "text" placeholder = "type here">
<input type = "password">
<input type = "checkbox"> 
<input type = "radio" name = "choice" value="a">radio1
                       ↪ 그룹을 만들어주는 역할을 하는 속성 
<textarea></textarea> //줄바꿈이 되는 태그 
<button></button>

hierarchy 나누기

body 태그에 많은 컨텐츠가 추가될수록 hierarchy를 정확히 나눠줘야 헷갈리지 않고 다음 작업을 수월하게 이어나갈 수 있다. 그러기 위해서 영역별로 구분을 명확하게 해줘야한다. 다음은 그에 필요한 의미론적 태그들이다.
div (division) normal
section 보통 제목, 컨텐츠가 포함된 구획을 나눌 때 사용한다, div와 다른점은 크게 없고 단지 의미적으로 구분하는 태그이다.
form 사용자 입력을 제출하는 용도로 보통 컨트롤(input,button)등을 포함한다. 특별한 action이나 method를 활용 가능한 div와 크게 다른 태그이다.

*Semantic tag는 태그 자체에 어떤 내용이 들어갈 지 파악이 가능한 의미론적 태그
header, footer, code

CSS

웹 페이지의 구성요소 중, 스타일을 정의하는 언어이다.
HTML이 웹 페이지의 요소(element)들을 구성하는 역할이라면
CSS는 검색창의 너비, 버튼의 크기, 구성요소를 어디에 위치할 것인가와 같이 그 구성요소들의 스타일을 정의한다.

How to use CSS?

CSS를 HTML에 적용하는 세가지 방법이 있다.
https://www.bitdegree.org/learn/internal-css

1) Inline
HTML의 특정 태그에 직접 style을 적용한다.
<h1 style = "color:red; font-style:italic">Hello world</h1>
h1태그에 style이라는 속성을 부여해서 색상은 빨간색, 폰트 스타일은 기울임꼴이라는 스타일을 적용했다.

2) Internal: HTML 내부에 stylesheet 작성
<style>태그를 이용해서 보통 head태그 안에 삽입하며, 태그를 선택하는 규칙(Selector)에 따라 일괄 적용한다.
<head>
   <style>
      h1 {
         color: red;
         margin-left: 20px;
      }
      p {
         color: blue;
      }
   </style>
</head>

3) External: HTML 외부에 stylesheet 작성
HTML내부에 <link>태그를 이용해, CSS 확장자로 저장된 stylesheet파일을 href속성을 이용해 삽입한다.
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

CSS SELECTOR

CSS에서 요소(element)를 선택하는 규칙이다.
*태그라는 용어는 시작 및 종료 태그와 같이 마크업을 의미하며, 요소는 의미를 갖는 하나의 구조를 의미한다.

id

id는 문서 내에 단 하나의 element가 가지는 유일무이한 값이다.
✅id는 특정 element를 이름 붙이는데 사용한다.

<div id="customized">
  <p>This is happy text.</p>

stylesheet에서는 #을 이용해 고유한 id를 선택한다.

#customized {
  font: 16px Lucida Grande, Arial, Helvetica, sans-serif;
}

class

여러 태그에 class를 부여할 수 있으며, 공백을 이용해서 한 element에 여러 class를 적용할 수 있다.
✅class는 스타일의 분류(classification)에 사용한다.

<div class="warning">
  Be careful! There are wizards present, and they are quick to anger!
</div>

.(dot)를 이용해 class를 선택한다.

div.warning {
  width: 100%;
  border: 2px solid yellow;
  color: white;
  background-color: darkred;
  padding: 0.8em 0.8em 0.6em;
}

CSS LAYOUT

기본적으로 요소는 위에서 아래로, 왼쪽에서 오른쪽으로 확장하며 왼쪽 상단의 좌표가 (0,0)이 된다.

👑 The box model

모든 단일 HTML요소는 CSS에 의해 하나의 box로 취급된다. 그리고 이 box를 스타일링하는 것이 각각의 요소들을 어떻게 스크린에 보여지게 할 것인가를 결정한다.
모든 상자들은 width, height, padding, border, margin으로 이루어져있다.
http://markusvogl.com/web1/interactive_box_model/css_box_demo.html 참고하면 좋은 사이트

border와 padding은 상자의 width와 height의 값을 변화시킨다. border로 변화시키는게 편하다.
margin은 현재 요소와 스크린의 다른 요소간의 완충 지대의 역할을 한다.

👑 Display property

dispaly property에는 총 네가지 요소가 있다. block,inline,inline-block,none
https://www.tutorialbrain.com/css_tutorial/css_display/

block은 웹페이지의 전체 가로길이를 차지한다. (h1,p,div,ol,ul,li,form)
inline display는 컨텐츠의 크기 만큼 만을 차지한다. (span,img,a)
inline-block은 inline 요소처럼 다른 요소들과 한 줄에 나란히 배치된다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해진다.
none 화면에서 사라진다.

👑 CSS Positioning

https://medium.com/@demayous1/about-css-positioning-7a913dc7425a

static HTML요소들이 기본적으로 갖고 있는 default 위치값
relative default 위치값을 기준으로 원하는 만큼 이동하게 해준다.
absolute 부모의 위치를 기준으로 원하는 만큼 이동하게 해준다. 이때 부모가 되는 relative 요소가 따로 없으면 브라우저 자체를 기준으로 이동한다.
fixed 고정된 위치이므로 드래그의 영향을 받지 않는다.