2018-01-09 TIL WPS 2.HTML과 CSS

09 Jan 2018 • TIL

HTML과 CSS

HTML의 테이블 요소

표를 만들 수 있는 테이블 요소 알아보기

테이블의 기본 구조

<table>  //테이블 시작
	<caption>두 학생의 성적 비교</caption> //테이블 제목
	<tr> //행(row)
		<th>이름</th> //헤더 셀
		<th>나이</th>
		<th>점수</th>
	</tr>
	<tr>
		<td>철수</td> //일반 셀
		<td>23세</td>
		<td>70점</td>
	</tr>
	<tr>
		<td>영희</td>
		<td>21세</td>
		<td>89점</td>
	</tr>
</table>

셀 병합

colspan은 가로로 셀을 합침. th나 td에서 사용 가능

<table>
	<tr>
		<td>a</td>
		<td>b</td>
	</tr>
	<tr>
		<td colspan="2">c</td>
	</tr>
	</table>

rowspan은 세로로 셀을 합침. 세로로 병합된 셀만큼 행의 셀 개수는 줄어든다.

<table>
    <caption>피카츄의 전용기</caption>
    <tr>
      <td rowspan="3">전용기</td>
      <td>볼트태클</td>
    </tr>
    <tr>
      <td>필살피카슛</td>
    </tr>
    <tr>
      <td>1000만볼트</td>
    </tr>
  </table>

행의 구조화

thead, tbody, tfoot은 행을 그룹화한다.

thead

열의 제목, 한번만 선언 가능

<table>
	<caption>피카츄</caption>
	<thead>
	  <tr>
	    <th colspan="3">이름</th>
	    <th>도감번호</th>
	    <th>성비</th>
	    <th>타입</th>
	  </tr>
	</thead>
</table>

tbody

본문에 해당하는 영역, 여러번 선언 가능

<table>
	<tbody>
      <tr>
        <td colspan="3">세계공통 명칭</td>
        <td rowspan="2">전국: 025 <br> 칼로스: 036</td>
        <td rowspan="2">수컷: 50% <br> 암컷: 50%</td>
        <td rowspan="2">전기</td>
      </tr>
      <tr>
        <td>피카츄</td>
        <td>피카츄</td>
        <td>Pickachu</td>
      </tr>
      <tr>
        <td colspan="6">포켓몬스터의 마스코트</td>
      </tr>
    </tbody>
</table>

Form 요소

form은 브라우저(클라이언트)에서 서버로 데이터를 전송하기 위해 사용하는 태그

form - mothod

폼에서 서버로 데이터를 전송하는 방식을 결정

  • GET : URL에 데이터를 담아 전달
  • POST : URL과는 별도로 데이터를 전달

form - action

  • form에서 데이터를 전송할 URL

input 태그

input요소는 값을 가지거나, form에 영향을 줌

<input type="password" name="password">
<input type="radio" name="radio">
<input type="checkbox" name="checkbox">
<input type="button">
<input type="file" name="file">
<input type="submit">
<input type="reset">
<input type="hidden" name="hidden" value="hiddenValue">

textarea 태그

여러줄의 텍스트를 입력(input 요소는 한 줄의 텍스트만 입력 가능)

<textarea name=“content" cols=“30" rows=“10"></textarea>

label 태그

폼 요소에 레이블을 붙임(유튜브로 설명 다시 듣기)

label 내부에 표현

<label>ID <input type="text"></label>

label과 별도로 표현

<label for="username">Username</label>
<input type="text" id="username">

select 태그

select태그는 여러개의 주어진 값 중 일부를 선택하는 역할

<select name="number" id="select-id">
	<option value="1">First</option>
	<option value="2">Second</option>
	<option value="3">Third</option>
	<option value="4">Fourth</option>
</select>

한번에 option을 몇 개 보여줄지 정함

<select size="2">
	<option value="apple">Apple</option>
	<option value="banana">Banana</option>
	<option value="orange">Orange</option>
</select>

optgroup 태그

select 요소의 option을 그룹지어줌

<select>
	<optgroup label="Fruits">
		<option value="apple">Apple</option>
		<option value="banana">Banana</option>
		<option value="orange">Orange</option>
	</optgroup>
	<optgroup label="Colors">
		<option value="red">Red</option>
		<option value="blue">Blue</option>
		<option value="green">Green</option>
	</optgroup>
</select>

button 태그

input의 버튼 요소와 같은 역할이지만 소스를 readable하게 만들 수 있음

<button type="submit">submit type button</button>
<button type="reset">reset type button</button>
<button type="button">button type button</button>

fieldset, legend 태그

  • fieldset : form 요소들을 담는 틀을 나타냄
  • lengend : fieldset의 제목을 나타냄
<fieldset>
	<legend>Login</legend> //legend는 첫번째 자식으로 사용
	<label>username : <input type="text"></label>
	<label>password : <input type="password"></label>
</fieldset>

클래스와 아이디 속성

  • class : 그룹으로 묶어서 스타일을 지정할 때 쓰는 이름(.클래스), 하나의 문서에 반복적 사용 가능하며 반복되는 소제목 처럼 반복되는 설정을 할 때 사용.

  • ID : 한 가지만 지정해서 쓰는 이름(#ID), 하나의 문서에 고유한 ID는 하나밖에 불가능하며 상단메뉴바, 홈페이지 로고처럼 유일한 것을 선택할 때 사용

<div class="chapter" id="chapter1">
	<h2>HTML</h2>
	<p>HTML강의를 시작해봅시다</p>
</div>
<div class="chapter" id="chapter2">
	<h2>CSS</h2>
	<p>Chapter2는 CSS입니다!</p>
</div>
<div class="chapter" id="chapter3">
	<h2>Python</h2>
	<p>HTML이 끝나면 Python을 배우죠</p>
</div>

색상

hex code를 사용한 #000000~#FFFFFF까지의 값과 HTML규격에 미리 정의한 ColorName을 사용할 수 있음

<p style="color: #333;">Color #333</p>
<p style="color: DarkGreen;">Color DarkGreen</p>

CSS 기본

CSS란?

마크업 언어(HTML)가 실제 표시되는 방법을 기술하는 언어, 레이아웃과 스타일을 정의할 때 사용

tip

  • 스타일 시트 안쪽에서만 가능
fz14 + tap //fontsize = 14;
fwb + tap //fontweight = bold;
c + tap //color

CSS 사용법

인라인 스타일 시트

<html lang="en">
<head>
	<style type="text/css">
		#body-title {
			font-size: 14px;
			font-weight: bold;
			color: DarkSlateGrey;
	}
	</style>
</head>
<body>
	<p id="body-title">Internal Style Sheet</p>
</body>
</html>

외부 스타일 시트

<html lang="en">
<head>
	<link rel="stylesheet" href=“style.css">
</head>
<body>
	<p id="body-title">External Style Sheet</p>
</body>
</html>

CSS 선택자

CSS를 적용할 요소

전체 선택자(Universal Selector)

  • HTML페이지 내부의 모든 요소에 같은 CSS속성을 적용
  • margin이나 padding값 초기화나 기본값 정할 때 사용
  • 페이지 로딩시간 길어질 수 있음
* {
padding: 0;
margin: 0;
}

태그 선택자(Tag Selector)

해당하는 모든 HTML태그 요소를 지정

h1 {
color: red;
}
p {
color: gray;
margin-bottom: 10px;
}

클래스 선택자(Class Selector)

  • CSS에서는 마침표 기호로 표시하고, HTML에서는 주어진 값을 class속성값으로 가진 요소를 선택
  • 마침표 앞에 태그를 붙여주면 범위는 지정한 태그에 한함

CSS

.section {
color: #333;
margin-bottom: 40px;
}
p.section-title {
font-size: 18px;
}
p.section-content {
font-size: 13px;
line-height: 13px;
color: #999;
}

HTML

<body>
	<div class="section">
		<p class="section-title">Lorem ipsum dolor sit amet.</p>
		<p class="section-content">Lorem ipsum dolor sit amet</p>
	</div>
	<div class="section">
		<p class="section-title">Lorem ipsum dolor sit amet.</p>
		<p class="section-content">Lorem ipsum dolor sit amet</p>
	</div>
</body>

ID 선택자(ID Selector)

  • CSS에서는 #기호, HTML에서는 주어진 값을 id속성 값으로 가진 요소를 선택
  • HTML에서 id값은 오직 하나만 존재
  • 클래스 선택자와 같이 tag명 입력 가능
  • ID선택자의 우선순위가 Class선택자보다 높다.

CSS

#index-title {
	font-size: 18px;
}
p#index-description {
	font-size: 12px;
color: #999;
}

HTML

<body>
	<h3 id="index-title">Lorem ipsum dolor sit.</h3>
	<p id="index-description">Lorem ipsum doloro?</p>
</body>

체인 선택자(Chain Selector) (이해못함)

한 요소에 아이디와 클래스들, 또는 여러 클래스가 적용되어 있을 경우 사용

CSS

#index-title {
font-size: 18px;
}
#index-title.header-title {
font-weight: bold;
}
.body-text {
font-size: 12px;
}
.body-text.description {
color: #999;
}

HTML

<body>
	<h3 id=“index-title” class=“header-title”>
		Lorem ipsum dolor sit.</h3>
	<p class=“body-text description”>
		Lorem ipsum doloro?</p>
</body>

그룹 선택자(Group Selector)

여러 선택자에 같은 스타일을 적용하는 경우, 쉼포로 구분해 선택자를 나열해 사용한다

CSS

#index-title {
	font-size: 18px;
}
p#index-description {
	font-size: 12px;
	color: #999;
}
#index-title, #index-description {
	text-align: center;
}

HTML

<body>
<h3 id="index-title">Lorem ipsum dolor sit.</h3>
<p id="index-description">Lorem ipsum doloro?</p>
</body>

복합 선택자(Combinator Selector)

  • 하위 선택자(descendant selector) : 부모요소에 포함된 ‘모든’ 하위 요소를 지정
selection ul {
	border: 1px solid black;
}
  • 자식 선택자(child selector) : 부모요소의 ‘바로 아래’ 자식 요소만을 지정
selection > ul {
	border: 1px solid black;
}
  • 인접 형제 선택자(adjacent sibling selector) : 첫 번째 동생 요소만을 지정
h1 + ul {
	background: LightBlue;
	color: DarkBlue;
}
  • 일반 형제 선택자(general sibling selector) : 조건을 충족하는 모든 동생 요소를 지정
h1 ~ ul {
	background: LightBlue;
	color: DarkBlue;
}

속성 선택자(Attribute Selector)

패턴 의미 예제
E[attr] ‘attr’속성이 포함된 요소 E <E attr>Lorem</E>
E[attr=”val”] ‘attr’속성의 값이 ‘val’인 요소 E <E attr=”val”>Lorem</E>
E[attr~=”val”] ‘attr’속성의 값에 ‘val’이 포함되는 요소 E <E attr=”val”>Lorem</E>
<E attr=”item val”>Lorem</E>
<E attr=”item-val”>Lorem</E>
E[attr|=”val”] ‘attr’속성의 값에 ‘val’이 포함되거나, ‘val-‘로 시작하는 요소 E <E attr=”val”>Lorem</E>
<E attr=”val-num3”>Lorem</E>
<E attr=”value”>Lorem</E>
E[attr^=”val”] ‘attr’속성의 값이 ‘val’로 시작하는 요소 E <E attr=”val”>Lorem</E>
<E attr=”value”>Lorem</E>
E[attr$=”val”] ‘attr’속성의 값이 ‘val’로 끝나는 요소 E <E attr=”val”>Lorem</E>
<E attr=”item-val”>Lorem</E>
E[attr*=”val”] ‘attr’속성의 값에 ‘val’이 포함되는 요소 E(공백이나 dash에 영향 받지 않음) <E attr=”val”>Lorem</E>
<E attr=”many itemval”>Lorem</E>
<E attr=”item-val”>Lorem</E>

가상 클래스 선택자(Pseudo-Classes Selector)

HTML소스에는 존재하지 않지만 필요에 의해 가상의 선택자를 지정

패턴 의미
E:link 방문하지 않은 링크 E
E:visited 방문한 링크 E
E:active E 요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안
E:hover E 요소에 마우스가 올라가 있는 동안
E:focus E 요소에 포커스가 머물러 있는 동안
E::first-line E 요소의 첫 번째 라인
E::first-letter E 요소의 첫 번째 문자
E::before E 요소의 시작 지점에 생성된 요소
E::after E 요소의 끝 지점에 생성된 요소

CSS스타일 적용 우선순위

특정도(specify)값이 높은 순서대로 적용됨

  • 특정도 계산식
스타일 특정도
Inline(인라인 스타일) A
ID Selector (ID 선택자) B
Class Selector(클래스 선택자) C
TAG Selector(태그 선택자) D

우선순위 강제적용

!important는 절대적인 우선순위를 가짐

스타일 특정도
important Absolute
Inline(인라인 스타일) A
ID Selector (ID 선택자) B
Class Selector(클래스 선택자) C
TAG Selector(태그 선택자) D

CSS

p {
font-size: 30px !important;
color: green !important;
}

HTML

<p style=“font-size: 10px; color: green;”>important는 모든걸 무시하지</p>

테스트시에는 유용할 수 있지만, 추후 유지보수나 전체저거 스타일 흐름을 방해하기 때문에 이용하지 않는 것이 좋다.

CSS 서체

  • Color : 글자 색 지정
h1 {
	color: #ff0000;
}
  • Font family : 웹 페이지를 방문한 사용자에게 폰트가 없을 경우를 대비해, 다양한 폰트들을 선언해 놓음.
body {
font-family: “돋움”, dotum, “굴림”, gulim, arial, helvetica, sans-serif;
}
  • Font Size

em은 부모 요소로부터의 비율

body {
	font-size: 14px;
}
h1 {
	font-size: 28px(2em);
}
  • Font Style
p {
	font-style: italic;
}
  • Font Weight

lighter, normal, bold, bolder, inherit, <400, 400, 700, >700

p {
	font-weight: bold;
}
p {
	font-weight: 700;
}
  • Line Height(줄간격)

숫자만 입력할 경우 해당 font-size에 곱한 값이 줄 간격이 됨, 폰트사이즈가 px로 고정되있다면 line-height도 고정된 px사용 가능

p {
	line-height: 1.5;
}
  • text-decoration(문자 꾸미기)
p.item1 {
text-decoration: none;
}
p.item2 {
text-decoration: underline; //밑줄
}
p.item3 {
text-decoration: overline; //윗줄
}
p.item4 {
text-decoration: line-through //취소선
  • text-align
p.item1 {
	text-align: left;
}
p.item2 {
	text-align: center;
}
p.item3 {
	text-align: right;
}
p.item4 {
	text-align: justify; //양쪽 정렬
}
  • text-indent

-값일 경우, 내어쓰기

p {
text-indent: 1em;
}
  • text-transform(대소문자 변환)
p.item1 { //첫글자만 대문자
	text-transform: capitalize; 
}
p.item2 { //모두 대문자
	text-transform: uppercase;
}
p.item3 { //모두 소문자
	text-transform: lowercase;
}
  • letter-spacing(자간)
p {
	letter-spacing: 5px;
}
  • word-spacing(단어 간격)
p {
	word-spacing: 5px;
}
  • vertical-align(요소간 수직 정렬)

나란히 오는 인라인 요소간의 정렬

<div>
	<strong>baseline : </strong>
	<span class="ori">align</span>
	<span class="vitem item1">Text</span>
</div>
<div>
	<strong>sub : </strong>
	<span class="ori">align</span>
	<span class="vitem item2">Text</span>
</div>
<div>
	<strong>super : </strong>
	<span class="ori">align</span>
	<span class="vitem item3">Text</span>
</div>
<div>
	<strong>top : </strong>
	<span class="ori">align</span>
	<span class="vitem item4">Text</span>
</div>
<div>
	<strong>text-top : </strong>
	<span class="ori">align</span>
	<span class="vitem item5">Text</span>
</div>
<div>
	<strong>bottom : </strong>
	<span class="ori">align</span>
	<span class="vitem item6">Text</span>
</div>
<div>
	<strong>text-bottom : </strong>
	<span class="ori">align</span>
	<span class="vitem item7">Text</span>
</div>
<div>
	<strong>middle : </strong>
	<span class="ori">align</span>
	<span class="vitem item8">Text</span>
</div>

.ori {
	font-size: 20px;
}
.vertical-item {
	font-size: 10px;
}
.item1 {
	vertical-align: baseline;
}
.item2 {
	vertical-align: sub;
}
.item3 {
	vertical-align: super;
}
.item4 {
	vertical-align: top;
}
.item5 {
	vertical-align: text-top;
}
.item6 {
	vertical-align: bottom;
}
.item7 {
	vertical-align: text-bottom;
}
.item8 {
	vertical-align: middle;
}

결과

img

  • White-Space(줄 바꿈 설정)
키워드 설명
nowrap 줄 바꿈 없음
pre 줄 바꿈, 띄어쓰기, 공백 등 모든 것이 보여지며 박스를 벗어나도 줄 바꿈이 일어나지 않음
pre-line 줄 바꿈만 보여주며, 띄어쓰기는 무시. 자동으로 줄바꿈이 됨
pre-wrap 줄 바꿈과 띄어쓰기를 모두 보여주며 자동으로 줄바꿈이 됨 
p.item1 { 
	white-space: nowrap;
}
p.item2 { 
	white-space: pre;
}
p.item3 {
	white-space: pre-line;
}
p.item4 {
	white-space: pre-wrap;
}

CSS 배경 스타일

  • background-color(배경색)

HEX Code와 rgba로 조절, a는 alpha(투명도) 조절

div {
	background-color: #eee;
	background-color: #efefef;
	background-color: rgb(230, 222, 120);
	background-color: rgba(230, 22, 120, 0.4);
}
  • background-image(배경 이미지)

상대 경로 이미지를 불러올 때 css기준이라는 것을 주의

div {
	background-image: url('../images/icon.png');
}
  • background-repeat(배경 이미지 반복)
키워드 설명
no-repeat 반복하지 않음
repeat 가로세로 바둑판 형식으로 반복
repeat-x 가로(x축)으로만 반복
repeat-y 세로(y축)으로만 반복

div { background-repeat: no-repeat; background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; }

  • background-position

삽입된 이미지의 좌표를 정함. 두 개의 값 각 각 x, y축의 값을 가진다.

div { background-position: 50% 16px; background-position: center bottom; }

  • background-attachment
키워드 설명
local 요소 안 내용에 고정(스크롤 할때 이미지가 같이 움직임)
scroll 요소에 고정(스크롤에 무관)
fixed background-position좌표를 웹 페이지 화면 전체 기준으로 함 
div {
	background-attachment: local;
	background-attachment: scroll;
	background-attachment: fixed;
}

CSS 테두리 스타일

CSS로 요소에 테두리 지정

테두리를 구성하는 요소

  • border-width(선 굵기)
div {
	border-width: 3px; //상하좌우
	border-top-width: 4px; //상단만
	border-width: 3px 4px 5px 6px; //상우하좌 순
	border-width: 5px 10px; //상하5, 좌우10
}
  • border-style(선 형태)
키워드 설명
solid 실선
dotted 점선
dashed 대쉬선
double 이중선
groove 입체적으로 보여줌
ridge groove와 반대방향
inset 오목
outset 볼록 
div {
border-style: solid;
border-top-style: double;
border-style: solid double dashed dotted;
}
  • border-color(선 색상)
div {
	border-color: #aaa;
	border-color: red blue green yellow;
}

박스모델

CSS요소를 이루는 형태로 콘텐츠, 패딩, 보더, 마진 4가지로 이루어져 있음

블록 요소와 인라인 요소의 차이

  • 인라인 요소는 가로 마진만 가질 수 있다. 길이 높이는 지정할 수 있고 내용에 자동으로 맞추어짐
  • 블록 요소는 가로/세로 마진을 모두 가짐

Margin(바깥 여백)

div {
margin-top: 10px;
margin-bottom: 30px;
margin: 10px 0;
margin: 40px 20px 30px 50px;
}

Padding(내부 여백)

padding과 margin을 구분하는 방법은 background-color를 각 각 지정한 후 개발자 모드에서 차지하는 공간을 확인하면 됨

div {
	padding-top: 10px;
	padding-bottom: 10px;
	padding: 10px 0;
	padding: 10px 20px 30px 40px;
}

box-sizing

박스 모델의 크기를 지정함

div {
	width: 200px;
	height: 50px;
	padding: 10px;
	border: 1px solid black;
	margin: 15px;
	box-sizing: border-box;
}

img

원래 요소의 총 가로길이(width+padding+border+margin)는 252px이나 border까지의 길이가 200px로 지정이 됨. margin은 제외하고 padding,border값은 바뀌지 않으며 content값만 움직임.

box-sizing은 결국 보더 까지의 사이즈를 제한하고 제한된 사이즈만큼 콘텐트에서 크기를 깎아먹는것(?), width는 콘텐트만의 크기를 말하는 것?

CSS 리스트 스타일

CSS로 리스트에 스타일 지정하기

  • Bullet 타입 설정하기
ul {
	list-style-type: disc;
	list-style-type: circle;
	list-style-type: square;
	
	list-style-type: decimal;
	list-style-type: lower-alpha;
	list-style-type: upper-alpha;
	list-style-type: lower-roman;
	list-style-type: upper-roman;
}

liststyle

  • Bullet 이미지 지정
ul {
list-style-image: url('images/mic.png');
}
  • Bullet 위치 지정

ul { list-style-position: inside; list-style-position: outside; }

참고로 리스트의 여백은 ul 요소의 padding으로 조절할 수 있음

CSS 테이블 스타일

  • border-collapse(테두리 합치기)
table {
border-collapse: collapse;
}

테이블의 셀간 공백을 합쳐 없애는 속성

  • border-spacing(테이블 셀 간격)
table {
	border-spacing: 10px;
}

border-collapse의 값이 collapse이면 적용되지 않음

  • empty-cells(빈 셀의 표시)
tr, td {
	empty-cells: show or hide;
}
  • table-layout
  1. auto

기본설정, 내용이 긴 쪽이 더 늘어남

table {
	table-layout: auto;
}
  1. fixed

셀 길이가 일정하게 유지됨, width property가 설정되어 있어야함

table {
	table-layout: fixed;
}

Homework

박보영 나무위키 페이지 소개 1.소개 까지 따라만들기

ul {
list-style-position: inside;
list-style-position: outside;
}

Comments

Related Posts