C#
Python
Java
Android
HTML/CSS
JavaScript
PHP
DataStructure
Algorithm
Database
Network
| 리그오브레전드 사양, 롤 설치 방법 (1) | 2020.04.06 |
|---|---|
| MVC란? MVC 디자인 패턴 (0) | 2019.03.20 |
| 카카오톡 pc버전 설치하기 (8) | 2018.09.13 |
| Visual Studio 2017 설치하기 (1) | 2018.09.12 |
| 카카오 개발자 컨퍼런스 2018 'if kakao' 개최 (0) | 2018.08.16 |
안녕하세요 열코입니다.
이번시간에는 CSS를 HTML에 적용하는 방법에 대해 알아보겠습니다.
☞ CSS란?
종속형 시트라고 불리며 Cascading Style Sheet의 줄임말입니다.
HTML이 뼈대면 CSS는 이 뼈대에 살을 붙이는 작업이라고 볼 수 있습니다. HTML을 꾸미는 작업이죠.
CSS는 HTML 또는 XHTML에 주로 사용되며 XML에서도 사용 할 수 있습니다.
레이아웃과 스타일의 자유도가 높아 현재 여러 언어에서 다양하게 사용되고 있습니다.
그럼 이 CSS를 HTML에 적용하는 방법에 대해 소개 해 드릴게요.
여러가지 방법이 있지만 이번 시간에는 3가지 방법 정도로 소개 해 드리겠습니다.
1. 인라인 방식
HTML에서 p 태그는 paragraph의 약자로 문단을 표현하는데 사용됩니다.
이 p 태그의 style 속성으로 간단하게 스타일을 변경 할 수 있습니다.
한, 두줄 정도의 간단한 스타일을 지정해 줄 때 간단하게 코드로 작업 하기에 편리합니다.
아래의 예제 코드 처럼 인라인 방식으로 스타일을 변경 해 보겠습니다.
myhtml.html
<!DOCTYPE HTML>
<html>
<body>
<p style="color:blue;">열코의</p>
<p style="color:red;"> 프로그래밍</p>
<p style="background-color:yellow;">일기</p>
</body>
</html>
☞ 실행 결과
2. 내부 스타일 시트 방식
두번째는 내부 스타일 시트 방식인데요. 이 방식은 head 부분에 스타일을 직접 정의해주고
해당 스타일 태그를 본문의 p 태그에서 id 속성으로 불러와 사용하는 방식입니다.
아래에 예제 코드와 실행 결과를 확인 해 볼까요?
myhtml2.html
<!DOCTYPE HTML>
<html>
<head>
<style>
#style1 {
color:yellow;
background-color:black;
}
#style2 {
color:red;
}
#style3 {
background-color:green;
color:white;
}
</style>
</head>
<body>
<p id=style1>열코의</p>
<p id=style2> 프로그래밍</p>
<p id=style3>일기</p>
</body>
</html>
☞ 실행 결과
3. 외부 스타일 시트 방식
마지막으로 가장 자주 사용되는 방식인 외부 스타일 시트 방식입니다.
이 방식은 css파일을 별도로 작성하여 css파일로 저장한 후 import를 사용하여 불러오는 방식입니다.
스타일을 정의해 두면 언제 어디서나 사용 가능한 장점이 있습니다.
현재 티스토리 블로그 스킨도 이런 방식으로 작성 되어있습니다.
본인의 티스토리 블로그에서 블로그 관리 - 스킨 편집 - html 편집에 들어가면 확인 할 수 있습니다.
아래의 예제 코드와 실행 결과를 한번 확인 해 봅시다.
myhtml3.html
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
@import url("mycss.css");
</style>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id=style1>열코의</p>
<p id=style2> 프로그래밍</p>
<p id=style3>일기</p>
</body>
</html>
mycss.css
#style1 {
color:green;
font-size:30px;
}
#style2 {
color:red;
font-weight:bold;
}
#style3 {
background-color:blue;
color:white;
}
☞ 실행 결과
이상 'HTML에 CSS 적용하기'에 대해 알아보았습니다.
질문 또는 오타나 잘못된 정보가 있는 경우 댓글로 달아주세요!
공감♡ 버튼을 눌러주시면 더욱 유용하고 좋은 포스팅으로 찾아 뵙겠습니다.
| 자바스크립트 스크롤 멈춤 이벤트 (0) | 2019.04.07 |
|---|---|
| JavaScript String substring() Method : 자바스크립트 문자열 자르기 (0) | 2019.03.25 |
| css로 텍스트 ... 처리하기 - 고정, 가변 길이 element (0) | 2019.03.25 |
| Javascript에서 $ 기호는 뭘까? (1) | 2019.03.24 |
| [프론트엔드 개발자] ECMAScript란? (0) | 2019.03.20 |
| HTML div 태그 사용법 (0) | 2018.11.13 |
| Atom Editor 설치 (0) | 2018.10.01 |
| HTML 기본 문법 (3) | 2018.09.30 |
안녕하세요 열코입니다.
이번 시간에는 HTML 기본 문법에 대해 알아보겠습니다.
먼저 HTML은 HyperText Markup Language의 약자로 웹페이지를 구성하는 마크업 언어입니다.
자바 스크립트와 CSS 등을 같이 사용하여 본문과 외관의 배치를 정의할 수 있습니다.
현재 HTML은 5버전까지 출시되었습니다.
HTML은 기본적으로 요소로 구성 되어 있습니다.
요소는 시작 태그와 종료 태그의 쌍으로 구성 되어 있으며,
태그는 <>(꺾쇠 괄호)로 둘러싸인 키워드입니다.
아래는 태그의 가장 기본적인 형태입니다.
<head>
<title>제목</title>
</head>
다른 언어들과 같이 HTML에서도 주석을 사용할 수 있습니다.
주석은 코드를 이해하는데 도움을 주며, 웹 페이지에는 표시되지 않습니다.
아래는 주석 사용 방법입니다.
<!-- 설명... -->
이와 같이 주석은 <!-- 로 시작해서 --> 로 끝나며, 사이에 설명을 적어놓으면 됩니다.
아래는 주요 HTML 요소들입니다.
<br> : 줄 바꾸기
<p> : 단락 바꾸기
<hr> : 가로줄
<center> ... </center> : 가운데 정렬
<font> ... </font> : 폰트 변경
<ul><li> ... <li> ... </ul> : 순서없는 목록(동그라미)
<ol><li> ... <li> ... </ol> : 순서있는 목록(숫자)
<table> ... </table> : 표 만들기
<tr> ... </tr> : 행
<td> ... </td> : 열
또한 HTML은 하이퍼텍스트를 지원합니다.
하이퍼텍스트(Hypertext)란 쉽게 말해 링크(Link)입니다. (하이퍼링크)
보통 블로그에 글을 써서 링크를 걸거나, 웹사이트에서 링크를 걸면 파란색으로 글씨가 바뀌고 밑줄이 그입니다.
요거 < 이게 바로 하이퍼텍스트입니다.
HTML에서는 a태그를 사용하여 하이퍼텍스트를 사용할 수 있습니다.
<a> ... </a> 이런식으로 사용합니다.
a태그의 속성은 다음과 같습니다.
href : hypertext reference의 약자입니다. 연결할 주소(절대 주소 또는 상대 주소)를 지정합니다.
예 : <a href="https://yeolco.tistory.com">열코의 프로그래밍 일기</a>
target : 지정된 href 주소를 보여줄 때 넣어줄 설정입니다.
- target = "_self" : 현재 브라우저에서 링크를 연결합니다.
- target = "_blank" : 새 창에서 링크를 연결합니다.
- target = "_top" : 현재 브라우저의 가장 위쪽으로 스크롤합니다.
(위로가기 버튼에 가장 많이 쓰이며, top 속성을 주었을 때 href는 사용 불가능합니다.)
title : 마우스를 링크위에 올려두면 나오는 설명입니다.
예 : <a href="https://yeolco.tistory.com" title="누르면 이동합니다.">열코의 프로그래밍 일기</a>
id : href 속성으로 링크가 아닌 현재 페이지에서 이동할 때 사용합니다.(#링크 사용)
예 : <a href="#here">이동</a>
<a id ="here">여기</a>
다음은 li 사용법입니다.
li는 list의 약자로 목록을 만들 때 <li> 태그를 사용합니다.
ul또는 ol을 사용하여 목록을 만들 수 있으며 ul은 순서가 없는 목록, ol은 순서가 있는 목록입니다.
아래와 같이 사용 할 수 있습니다.
<html>
<body>
<ol>
<li>a
<li>b
<li>c
</ol>
<ul>
<li>가
<li>나
<li>다
</ul>
</body>
</html>
위 코드의 실행 결과 아래 사진과 같습니다.
순서가 있는 ol 태그의 경우 숫자로 순서가 매겨지며, 순서가 없는 ul 태그의 경우 검은 동그라미로 마킹됩니다.
이번시간에는 HTML의 기본 문법에 대해서만 알아보았습니다.
다음시간에 더 심층적인 문법에 대해 알아보겠습니다.
이상 ''에 대해 알아보았습니다.
질문 또는 오타나 잘못된 정보가 있는 경우 댓글로 달아주세요!
공감♡ 버튼을 눌러주시면 더욱 유용하고 좋은 포스팅으로 찾아 뵙겠습니다.
| 자바스크립트 스크롤 멈춤 이벤트 (0) | 2019.04.07 |
|---|---|
| JavaScript String substring() Method : 자바스크립트 문자열 자르기 (0) | 2019.03.25 |
| css로 텍스트 ... 처리하기 - 고정, 가변 길이 element (0) | 2019.03.25 |
| Javascript에서 $ 기호는 뭘까? (1) | 2019.03.24 |
| [프론트엔드 개발자] ECMAScript란? (0) | 2019.03.20 |
| HTML div 태그 사용법 (0) | 2018.11.13 |
| HTML에 CSS 적용하기 (0) | 2018.10.03 |
| Atom Editor 설치 (0) | 2018.10.01 |
