HTML, CSS 종합 정리

Programming/웹프로그래밍

HTML, CSS 종합 정리

쌍쌍바나나 2016. 5. 13. 23:10

h1은 거의 제목을 사용할때 사용하고, h2같은 경우에는 부-제목을 쓸때 사용합니다.

p는 paragraph의 약자로서 하나의 문단을 나타냅니다.

주석으로 사용합니다.

텍스트에 색 변경하기.

<h2 style="colorr:blue">Blue Color</h2>

이때 모든 텍스트에 색을 변경하기 위해서는 한줄 한줄 쓰기에는 많은 부담이 있습니다.

그래서 등장한게 CSS입니다. CSS는 Cascading Style Sheets의 약자입니다.

HTML코드에 스타일을 입히기 위해서는

<style>

</style>

여기서 이제 h2요소에 대해서 CSS selector를 만들어야 합니다.

<style>

h2 {color:red;}

</style>

<h2>Blue Color</h2>

그렇다면 항상 사용하는 style을 CSS Class로 만들어서 Element에 Style을 적용하면 조금더 효율적일 것이다.

<style>

,blue-text {

color: blue;

}

</style>

blue-text의 CSS class를 생성했다.

<h2 class="blue-text">Banana</h2>를 하면 CSS class를 적용할 수 있다.

위처럼 클래스를 사용하면 추후 변경해야 Banana의 텍스트의 스타일을 변경하기 위해 class명을 변경하면 쉽게 update가 가능하다.

CSS Class에 여러개의 Style Multiple Elements를 사용해보자.

<p class="blue-text">Banana Paragraph</p>를 하면 CSS class를 적용할 수 있다.

자 그럼 이제 font-size를 변경해보자.

CSS property로 font-size를 사용할 수 있다.

h1 {

font-size: 30px;

}

아래와 같이 해주면, p element의 font-size만 변경되는 것을 볼 수 있다.

<style>

.red-text {

color: red;

}

p {

font-size: 16px;

}

</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Element의 font를 변경하고 싶으면 font-family의 property를 사용하면된다. (모든 브라우저에서 지원하는 default fonts :Serif, Sans-serif, Monospace)

p {

font-size: 16px;

font-family: Monospace;

}

자 그렇다면 이제 Google Font를 Import해보자.

Lobster font를 가져오기 위해 HTML에 load하는 코드를 작성해야 합니다.

이제는 Lobster를 font-fmaily로 가져올 수 있습니다.

그렇다면 브라우저마다 지원하는 텍스트가 있을텐데, 만약 지원을 안하면 어떻게 해야하는가

그럴때 다른폰트로 degrade한다 라는 표현을 사용한다. 만약 Hevetica라는 폰트를 사용하려고 하는데, 지원하지 않는다? 그럴때는

p {

font-family: Helvetica, Sans-Serif;

}

라고 입력해주면, Sans-Serif로 degrade를 해준다.

이미지를 Website에 넣어보자.

이미지를 웹사이트에 넣기 위해서는 img element를 사용하면된다. specific image의 URL을 가리키기 위해서는 src의 attribute를 사용하면 된다.

이미지를 넣었다면, 이제 사이즈를 조절할 줄 알아야겠지요.

CSS에서 with라는 property는 element의 넓이를 조절해주는 역할을 한다. 사이즈의 단위는 px(pixels)을 사용한다.

CSS style로 larger-image와 smaller-image를 만들어서 사용하면 통일된 이미지의 크기로 화면에 출력이 가능하다.

<style>

.larger-image {

width: 500px;

}

.smaller-image {

width: 100px;

}

</style>

Element에 Border Around를 추가해보자.

CSS boarder는 style, color 그리고 width라는 properties를 가지고 있다.

만약 우리가 빨간색의 5pixel의 border을 만들고 싶다면

<style>

.thin-red-border {

border-color: red;

border-width: 5px;

border-style: solid;

}

</style>

여기서 만약에 multiple class를 지정해주기 위해서는 space를 seperate하면 된다.

Border Round를 부드럽게 하기 Border Radius

CSS의 border-radius property를 사용해서 corners를 round out할 수 있다.

.thick-green-border {

border-color: green;

border-width: 10px;

border-style: solid;

border-radius: 10px;

}

여기서 pixel을 사용하지 않고 퍼센트(%)를 사용해서도 가능하다.

HTML의 a elements는 anchor elements 의 약자이다.

현재 사이트에서 외부에 있는 content를 연결하는데 사용한다.

<p><a href='http://freecatphotoapp.com'>cat photos</a></p>

내부에 있는 텍스트에 anchor element를 포함하기 위해서는 아래오 같이 작성

<p>click here for <a href="http://www.freecatphotoapp.com">cat photos</a></p>

Dead Links를 만들기 위해서는 # (Hash Symbol)을 사용하면 된다.

이미지에 Link를 삽입하는 방법

alt attribute는 alt text라고 불리운다. 이미지로딩이 실패하면 화면에 뿌려주는 것을 말한다. 화면에 표시가 안되거나, 사용자가 그림을 이해하기 위해 중요한 역할을 한다. blind or visually impaired 사용자에게 도움을 준다. search engines에서도 alt attribute의 값을 보고 검색을 한다.

모든 이미지가 alt attribut를 가져야만 한다.

Bulleted Unordered List 만들기

HTML에는 unordered lists, bullet point-style lists를 만들기 위한 special element를 가지고 있다.

unordered lists는 <ul>의 element로 시작한다. ul element안에는 여러개의 li element가 포함되어 있다.

예를들면

<ul>

<li>banana</li>

<li>apple</li>

</ul>

Ordered List 만들기

ordered lists, numbered-style lists를 만들기 위해서 <ol>과 <li> 를 사용한다.

예를 들어

<ol>

<li>banana</li>

<li>apple</li>

<li>melon</li>

<ol>

Text Field 만들기

사용자로 입력을 받을 수 있는 좋은 방법이 바로 Text Field를 사용하는 것이다.

<input type="text"> input element는 self-closing 한다.

TextField에 Placeholder Text추가하기. (hint text와 유사한)

사용자가 무언가를 입력하기 전에 input에 나타는 텍스트를 Placeholder text라고 한다.

<input type="text" placeholder="this is placeholder text"> placeholder는 attribute

Form Element 만들기

데이터를 서버로 전송하기 위해서는 form element action을 사용하면 할 수 있다.

form에 submit버튼을 추가해보자. 버튼을 눌렀을때 form에서 특정 URL로 데이터가 전송된다. form의 action attribute와 함께

<button type="submit">this button submits the form</button>

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

</form>

Use HTML5 to Require a Field

input element에서 required를 사용하면, 유저는 field가 완성되기 전에는 submit할 수 없다.

만약 그냥 submit을 누르게 되면

구글 크롬 기준

그럼 Radio Buttons을 만들어보자

Radio Button은 오직 한개의 정답을 요구할때 사용한다. (name은 같을 수 있다.)

<label><input type="radio" name="indoor-outdoor"> Indoor</label>

<label><input type="radio" name="indoor-outdoor"> Outdoor</label>

Set of Checkboxes 만들기

한개 이상의 정답을 요구할때 사용한다. (name은 같을 수 있다.)

default값 설정하는 방법

h1은 거의 제목을 사용할때 사용하고, h2같은 경우에는 부-제목을 쓸때 사용합니다.

p는 paragraph의 약자로서 하나의 문단을 나타냅니다.

주석으로 사용합니다.

텍스트에 색 변경하기.

<h2 style="colorr:blue">Blue Color</h2>

이때 모든 텍스트에 색을 변경하기 위해서는 한줄 한줄 쓰기에는 많은 부담이 있습니다.

그래서 등장한게 CSS입니다. CSS는 Cascading Style Sheets의 약자입니다.

HTML코드에 스타일을 입히기 위해서는

<style>

</style>

여기서 이제 h2요소에 대해서 CSS selector를 만들어야 합니다.

<style>

h2 {color:red;}

</style>

<h2>Blue Color</h2>

그렇다면 항상 사용하는 style을 CSS Class로 만들어서 Element에 Style을 적용하면 조금더 효율적일 것이다.

<style>

,blue-text {

color: blue;

}

</style>

blue-text의 CSS class를 생성했다.

<h2 class="blue-text">Banana</h2>를 하면 CSS class를 적용할 수 있다.

위처럼 클래스를 사용하면 추후 변경해야 Banana의 텍스트의 스타일을 변경하기 위해 class명을 변경하면 쉽게 update가 가능하다.

CSS Class에 여러개의 Style Multiple Elements를 사용해보자.

<p class="blue-text">Banana Paragraph</p>를 하면 CSS class를 적용할 수 있다.

자 그럼 이제 font-size를 변경해보자.

CSS property로 font-size를 사용할 수 있다.

h1 {

font-size: 30px;

}

아래와 같이 해주면, p element의 font-size만 변경되는 것을 볼 수 있다.

<style>

.red-text {

color: red;

}

p {

font-size: 16px;

}

</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Element의 font를 변경하고 싶으면 font-family의 property를 사용하면된다. (모든 브라우저에서 지원하는 default fonts :Serif, Sans-serif, Monospace)

p {

font-size: 16px;

font-family: Monospace;

}

자 그렇다면 이제 Google Font를 Import해보자.

Lobster font를 가져오기 위해 HTML에 load하는 코드를 작성해야 합니다.

이제는 Lobster를 font-fmaily로 가져올 수 있습니다.

그렇다면 브라우저마다 지원하는 텍스트가 있을텐데, 만약 지원을 안하면 어떻게 해야하는가

그럴때 다른폰트로 degrade한다 라는 표현을 사용한다. 만약 Hevetica라는 폰트를 사용하려고 하는데, 지원하지 않는다? 그럴때는

p {

font-family: Helvetica, Sans-Serif;

}

라고 입력해주면, Sans-Serif로 degrade를 해준다.

이미지를 Website에 넣어보자.

이미지를 웹사이트에 넣기 위해서는 img element를 사용하면된다. specific image의 URL을 가리키기 위해서는 src의 attribute를 사용하면 된다.

이미지를 넣었다면, 이제 사이즈를 조절할 줄 알아야겠지요.

CSS에서 with라는 property는 element의 넓이를 조절해주는 역할을 한다. 사이즈의 단위는 px(pixels)을 사용한다.

CSS style로 larger-image와 smaller-image를 만들어서 사용하면 통일된 이미지의 크기로 화면에 출력이 가능하다.

<style>

.larger-image {

width: 500px;

}

.smaller-image {

width: 100px;

}

</style>

Element에 Border Around를 추가해보자.

CSS boarder는 style, color 그리고 width라는 properties를 가지고 있다.

만약 우리가 빨간색의 5pixel의 border을 만들고 싶다면

<style>

.thin-red-border {

border-color: red;

border-width: 5px;

border-style: solid;

}

</style>

여기서 만약에 multiple class를 지정해주기 위해서는 space를 seperate하면 된다.

Border Round를 부드럽게 하기 Border Radius

CSS의 border-radius property를 사용해서 corners를 round out할 수 있다.

.thick-green-border {

border-color: green;

border-width: 10px;

border-style: solid;

border-radius: 10px;

}

여기서 pixel을 사용하지 않고 퍼센트(%)를 사용해서도 가능하다.

HTML의 a elements는 anchor elements 의 약자이다.

현재 사이트에서 외부에 있는 content를 연결하는데 사용한다.

<p><a href='http://freecatphotoapp.com'>cat photos</a></p>

내부에 있는 텍스트에 anchor element를 포함하기 위해서는 아래오 같이 작성

<p>click here for <a href="http://www.freecatphotoapp.com">cat photos</a></p>

Dead Links를 만들기 위해서는 # (Hash Symbol)을 사용하면 된다.

이미지에 Link를 삽입하는 방법

모든 이미지가 alt attribut를 가져야만 한다.

Bulleted Unordered List 만들기

HTML에는 unordered lists, bullet point-style lists를 만들기 위한 special element를 가지고 있다.

unordered lists는 <ul>의 element로 시작한다. ul element안에는 여러개의 li element가 포함되어 있다.

예를들면

<ul>

<li>banana</li>

<li>apple</li>

</ul>

Ordered List 만들기

ordered lists, numbered-style lists를 만들기 위해서 <ol>과 <li> 를 사용한다.

예를 들어

<ol>

<li>banana</li>

<li>apple</li>

<li>melon</li>

<ol>

Text Field 만들기

사용자로 입력을 받을 수 있는 좋은 방법이 바로 Text Field를 사용하는 것이다.

<input type="text"> input element는 self-closing 한다.

TextField에 Placeholder Text추가하기. (hint text와 유사한)

사용자가 무언가를 입력하기 전에 input에 나타는 텍스트를 Placeholder text라고 한다.

<input type="text" placeholder="this is placeholder text"> placeholder는 attribute

Form Element 만들기

데이터를 서버로 전송하기 위해서는 form element action을 사용하면 할 수 있다.

form에 submit버튼을 추가해보자. 버튼을 눌렀을때 form에서 특정 URL로 데이터가 전송된다. form의 action attribute와 함께

<button type="submit">this button submits the form</button>

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

</form>

Use HTML5 to Require a Field

input element에서 required를 사용하면, 유저는 field가 완성되기 전에는 submit할 수 없다.

만약 그냥 submit을 누르게 되면

구글 크롬 기준

그럼 Radio Buttons을 만들어보자

Radio Button은 오직 한개의 정답을 요구할때 사용한다. (name은 같을 수 있다.)

<label><input type="radio" name="indoor-outdoor"> Indoor</label>

<label><input type="radio" name="indoor-outdoor"> Outdoor</label>

Set of Checkboxes 만들기

한개 이상의 정답을 요구할때 사용한다. (name은 같을 수 있다.)

Single Div Element에 Nest Many Elements

div element는 division element로 다른 elements를 container역할을 하는데 사용한다.

CSS를 사용할때 div에 있는 모든 elements에 style이 적용이 가능하기 때문에 매우 유용하다.

그렇다면 여러개의 elements의 집합이 있는 div element의 색을 변경하기 위해서는

CSS에서는 background-color의 property는 배경색을 변경할때 사용한다.

style {

.green-background {

background-color: green;

}

Element에 ID를 set하기

HTML element는 class와 유사하게 id attribute를 가질 수 있다. JQuery를 배우면 id attributes의 여러가지 장점을 배울 수 있다.

id attribute는 말 그대로 unique해야 한다. 하지만 Browser에서는 id를 unique를 강제로 하지 않는다.

<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>

<label><input type="radio" name="indoor-outdoor"> Outdoor</label>

<label><input type="checkbox" name="personality" checked> Loving</label>

<label><input type="checkbox" name="personality"> Energetic</label>

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

</form>

ID attribute를 사용해서 Element에 style 적용하기

id attributes의 class들 처럼 사용이 가능한것 또한 장점이다.

#cat-photo-element {

background-color: green;

}

id는 CSS에서 style에서 선언하기 위해서는 #을 사용한다. 반면 class는 .을 사용한다.

Element의 padding을 조정해보자.

각 HTML의 element를 둘러싸고 있는 공간을 컨트롤을 하기 위한 properties는 padding, margin 그리고 border이다.

<style>

.injected-text {

margin-bottom: -25px;

text-align: center;

}

.box {

border-style: solid;

border-color: black;

border-width: 5px;

text-align: center;

}

.yellow-box {

background-color: yellow;

padding: 10px;

}

.red-box {

background-color: red;

padding: 20px;

}

.green-box {

background-color: green;

padding: 10px;

}

</style>

<h5 class="injected-text">margin</h5>

<h5 class="box red-box">padding</h5>

<h5 class="box green-box">padding</h5>

</div>

padding은 element의 border와 element사이의 공간의 양을 조정할때 말을 한다. 녹색 박스와 빨간색 박스는 노란 박스안에 있는 것을 볼 수 있다. 빨간 박스는 초록색 박스보다 더 많은 padding을 갖고 있다. 만약 초록박스의 padding을 증가시키면 border와 텍스트 padding사이의 거리는 증한다.

margin은 element의 border와 둘러싸고 있는 요소들의 거리를 조절할 때 사용한다.

빨간박스는 초록색 박스보다 더 많은 margin을 갖고 있다.

만약 margin값이 negative 하면 element는 더 커질 것이다.

Element의 각 side의 padding을 다루게 주기.

CSS padding을 조절하기 위한 properties는 padding-top, padding-right, padding-bottom, 그리고 padding-left가 있다.

CSS margin을 조절하기 위한 properties는 margin-top, margin-right, margin-bottom, 그리고 margin-left가 있다.

위 처럼 매번 top, right, bottom, left를 쓰면 너무 번거롭다. 그렇기 때문에

Clockwise Notation을 사용하면 쉽게 할 수 있다. (시계 방향으로 작성하면 된다해서)

padding : 10px 20px 10px 20px

margin : 10px 20px 10px 20px

HTML Body Element Style 적용하기

CSS의 inheritance라는 것을 들어 보았는가?

모든 HTML page는 body를 갖고 있다. body 전체 스타일을 지정하기 위해서는

<style>

body {

background-color: black;

font-family: Monospace;

color: green;

}

</style>

<h1>Hello World!</h1>

Prioritise

종종 HTML element들은 multiple styles을 받아 다른 style과 충돌이 나는 경우가 있다.

해결하는 방법은 총 3가지다.

1. CSS에서 style 선언 순서를 중요하게 (가장 최근에 선언된게 override)

2. id attribute를 사용해 class attribute를 override

3. in-line style을 적용해 모든 CSS를 override

4. !important를 사용

<style>

body {

background-color: black;

font-family: Monospace;

color: green;

}

.pink-text {

color: pink;

}

.blue-text {

color: blue;

}

</style>

<h1 class=pink-text>Hello World!</h1>

파란색글씨

<h1 class="pink-text blue-text">Hello World!</h1>

<h1 class="blue-text pink-text">Hello World!</h1>

class의 순서는 의미가 없다.

그 이유는 우선순위는 CSS의 선언 순서가 중요한것이다.

즉, Browser에서는 CSS를 읽을때 top에서 bottom의 방향으로 읽는 다는 것을 증명할 수 있다.

그 의미는 가장 마지막에 선언한 CSS를 사용한다 (충돌이 날때는)

그렇다면 override되는 CSS에서 id는 class와 다르게 항상 중요하게 여겨지기 때문에 순서가 의미가 없다.

override를 무시하는 또 하나의 빵법은 in-line style을 사용하면 된다. (CSS에 선언된 모든 style element를 override 해버린다.)

<h1 style="color: red" class="brown-text blue-text">hi banana</h1>

우리는 많은 CSS libraries를 사용할 것이다. 그러면 나의 CSS가 override가 되는 경우가 있다. 이때는 !important를 사용하면 된다.

예를 들어 color: red !important; 이렇게 사용하면 해당 클래스 또는 아이디의 style이 모든 style을 override한다.

hex code를 애용해 색 변경하기

CSS에서는 6 hexadecimal digits을 사용해 색을 나타낸다. #000000은 검정색을 나타낸다.

background-color: #000000;

background-color: rgb(0,0,0);

background-color: black;

#FF0000 #F00 같은 색으로 인식한다. (빨간색)

저작자표시

'Programming > 웹프로그래밍' 카테고리의 다른 글

jQuery (0)	2016.05.14
[JavaScript] Responsive Design With Bootstrap (0)	2016.05.14
[NodeJS] 파라미터 전달 - GET, POST (1)	2016.05.09
[NodeJS] 페이지 강제 이동 - 응답헤더 작성 (0)	2016.04.22
[NodeJS] WebServer 만들기 - FileSystem을 이용 (0)	2016.04.19

현재글HTML, CSS 종합 정리

불로

함께 하는 블로그

git, TensorFlow, javascript, RDD, 리눅스, ubuntu, 소스코드, 설치, 안드로이드, 자바스크립트, Python, nodejs, dict, Android, 빅데이터, 스파크, Spark, Linux, 파이썬, 데이터분석,

Today :
Yesterday :

불로