<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
a[href="https://naver.com"]{
color:green;
}
a:hover{
color:red;
}
</style>
</head>
<body>
<a href="https://naver.com"><h1>Naver</h1></a>
<a href="https://daum.net"><h1>Daum</h1></a>
</body>
</html>[SW/html] - HTML (Hyper Text Mark-up Language) 시작하기
HTML (Hyper Text Mark-up Language) 시작하기
HTML은 Text로 작성된 웹페이지를 위한 Mark-up 언어 입니다. 지금 부터 예시 코드는가 나오는데 예시코드의 작성은 Visual studio code에서 진행하시면 됩니다. Visual studio code를 활용한 HTML code 작성은 따.
soc91.tistory.com
지난 번 글인 HTML에 이에서 CSS를 적어 보겠습니다.
CSS는 Cascading Style Sheets의 약자로
우리가 만든 HTML web page에 style을 입히기 위해 사용하는 언어로
웹페이지에 내 Web page를 어떻게 보여줄지를 표현하는 언어라고 생각하시면 됩니다.
우리가 웹페이지에 색깔이나 공간 혹은 구조의 정렬과 같은 것들을 수행하기 위해서는
CSS를 사용해야 합니다.
가장 간단한 CSS 코드를 추가해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>My Web page</h1>
</body>
</html>
아래와 같은 코드에
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1 style="color:blue;">My Web page</h1>
</body>
</html>
아래와 같이 h1 부분에 sytle="" 라는 문구를 넣고
그 안에 color:blue를 추가 해보면 어떻게 될까요?
예상이 되실거라 생각합니다.
결과는 아래와 같습니다.
blue 대신에 다른 색깔을 넣을 수도 있습니다.
집어 넣은 색깔 명에 따라서 다른 색깔이 나오고
rgb(0~255, 0~255, 0~255) 왼쪽과 같이
R,G,B에 해당하는 숫자를 넣어서
원하는 색깔을 조합을 통해 직접 만드실 수 도 있습니다.
이렇게 h1 tag에 style을 적용해봤는데요
만약에 이 웹상에 적용되는 모든 h1 tag에
같은 style을 적용하고 싶다면 어떻게 해야 될까요?
그럴때는 <head>안에
<style> tag를 추가해서 선언하면 됩니다.
한번 적용해볼까요?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>My Web page</h1>
</body>
</html>
위에 있는 코드를 아래와 같이 바꿔 봤습니다 .
상당히 간단하죠?
style tag에 h1은 모두 color를 blue해라 라는 말이 들어가 있어서
이 웹페이지에 선언되는 h1 tag는 모두 blue로 선언 될 겁니다.
이제 다른 요소도 넣고 다른 색깔도 넣어볼까요?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
h1 {
color:red;
}
body{
text-align:center;
}
</style>
</head>
<body>
<h1>My Web page</h1>
test string
</body>
</html>
이번에는 h1 tag는 모두 빨간색으로 바꾸고
body tag 안에 있는 모든 내용은
가운대 정렬을 해봤습니다.
위와 같이 웹페이지가 만들어지는걸 보실 수 있습니다 :)
자 이제
style code를
<head>로 옮기는걸 봤는데
만약 작성할 web page에 내용이 많다면
style까지 모두 하나의 html에 담았을때
가독성이 너무 떨어지겠죠?
이럴때는
style에 해당하는 코드만 뽑아서
.css 라는 확장자로 따로 저장해 둘 수 있습니다!
위와 같이 작성하시면 되는데
코드를 첨부해 보면
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="styles.css"/>
<title>Document</title>
</head>
<body>
<h1>My Web page</h1>
test string
</body>
</html>
앞선 코드에서 <head>에 있던
<style>이 사라지고
<link>가 생겼습니다.
그리고
<link rel="stylesheet" href="styles.css" />
라고 입력되어 있습니다.
rel=" xxx"
xxx 부분에는 정해진 속성값이 들어가는데
스타일시트로서 연결될때는
stylesheet라고 정확하게 명시해주셔야 합니다.
그 외에
alternate, author, help, license, search 등등
다른 rel에 들어가는 속성값들이 있으니
궁금하신분은 따로 살펴보시기 바랍니다 :)
여기서는 stylesheet만 사용합니다.
이어서 href="파일위치" 이렇게 넣어주시면 연결됩니다.
그 "파일위치"는 css 파일의 위치를 말하는데
해당 css file은 아래와 같이 작성합니다.
h1 {
color:red;
text-align:center;
}
엄청 간단합니다.
그냥 기존 <style>에 있던 내용을
가져다가 붙이기만 하면 됩니다.
동작 결과는 아래와 같습니다.
CSS를 이용하면 특정 요소의 크기를 조절 할 수 있습니다
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div {
background-color: blue;
width:100px;
height:400px;
}
</style>
</head>
<body>
<div>
Hello
</div>
</body>
</html>위 코드를 보시면
div tag의
background-color
width, height를 조정 했습니다.
결과는 아래와 같습니다.
css는 적용할 수 있는 요소가 상당히 많습니다.
그중 몇 가지를 좀더 살펴볼까요?
이번에는 padding, border, margin에 대해서 알아 보겠습니다.
앞서 width와 height를 이용해서 요소의 크기를 결정했습니다.
이어서 padding을 이용하면
해당 요소의 상하 좌우에 pad를 붙여 주는것이 가능합니다.
border는 테두리 선을 만들어줄 수 있고
margin은 다른 요소와의 간격을 적용할 수 있습니다.
말로 적는거 보다 실제로 보는게 빠르니까 하나씩 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div {
background-color: blue;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div>
Hello
</div>
</body>
</html>일단 이렇게 만들어 놓고
실행하면 아래와 같습니다.
이제 여기다가 변화를 보기 좋게 할려고 배경을 깔아보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
background-color : lightgreen;
}
div {
background-color: blue;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div>
Hello
</div>
</body>
</html>
이제 여기에
padding을 줘보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
background-color : lightgreen;
}
div {
background-color: blue;
padding:30px;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div>
Hello
</div>
</body>
</html>
hello 상하 좌우로 빈공간이 생긴걸 보실수 있습니다!
이게 패딩입니다.
이어서 border을 넣어보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
background-color : lightgreen;
}
div {
background-color: blue;
padding:30px;
border: 12px solid red ;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div>
Hello
</div>
</body>
</html>
border를 활용해서 테두리 선을 넣는데
border : 두께, 테두리선의 형태 색깔
이렇게 넣어주시면 됩니다.
테두리 선이 생겼습니다!
이제 이어서 margin을 넣어보죠
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
background-color : lightgreen;
}
div {
background-color: blue;
padding:30px;
border: 12px solid red ;
margin: 30px;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div>
Hello
</div>
</body>
</html>margin을 적용하면 요소 주변에 빈공간이 만들어 집니다.
여기까지 해서 padding, border, margin을 모두 알아 봤습니다.
3가지 활용을 모두 보았으니 좀더 쉬운 표현으로 바꿔서 말해보겠습니다.
padding과 margin의 차이는
border의
안에 공간을 만드는지
밖에 공간을 만드는지
의 차이 입니다.
이제는 css를 이용해서 요소안에 들어가는 글자를 바꿔볼까요?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div {
font-family: Arial;
font-size : 28px;
font-weight :700;
}
</style>
</head>
<body>
<div>
Hello
</div>
</body>
</html>
font-family는 Arial로
font-size는 28px;
font-weight : 700으로 해줬습니다.
그 결과
아무 style 표시도 없으면 위와 같았는데
아래와 같아 졌습니다.
이제 id와 class에 대해 알아보겠습니다.
css를 이용해서 html에 style을 입히다 보면
특정한 요소에만 적용되는 style을 만들고 싶을 수 있습니다.
그때 사용하는 것이 id와 class 입니다.
먼저 id 사용법을 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
</style>
</head>
<body>
<h1>Hello 1</h1>
<h1>Hello 2</h1>
<h1>Hello 3</h1>
</body>
</html>이렇게 Hello 1 2 3 를 만들어 두고
Hello 1에만 특별하게 색깔을 주고 싶다면 어떻게 해야 될까요?
그때 id를 사용하면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#first{
color:blue;
}
</style>
</head>
<body>
<h1 id="first">Hello 1</h1>
<h1>Hello 2</h1>
<h1>Hello 3</h1>
</body>
</html>
Hello 1이 적힌 h1 tag에 id="first"라고 추가 해줬습니다.
그리고 head안에 있는 style tag에 #first{ color:blue;}를 넣어줬습니다.
여기서 기억해야 할 것은 tag에 id="아이디 이름" 도 있지만
style tag안에서 id는 #을 쓰고 id의 이름을 써줘야 한다는 것입니다.
class도 사용방법은 같습니다.
다만 # 대신에 .을 사용해야 한다는 것만 다릅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#first{
color:blue;
}
.second{
color:red;
}
</style>
</head>
<body>
<h1 id="first">Hello 1</h1>
<h1 class="second">Hello 2</h1>
<h1>Hello 3</h1>
</body>
</html>
결과는 위와 같습니다.
그럼 id와 class의 차이가 뭘까요?
id는 단 하나의 요소를 선택할때 사용합니다.
class는 여러 요소를 공통적으로 바꿀때 사용합니다.
적용 우선순위는 id > class > tag이름 입니다.
즉 하나의 요소에 적용되는 sytle이 id, class, tag이름으로 총 3개가 있을때
그 적용에 있어 우선순위에 해당하는 id sytle이 적용됩니다.
그런데 id 보다 우선순위로 적용되는건
inline style 선언입니다.
<h1 style="color:blue"> <= 이 방식을 inline이라고 하는데
inline이 무조건 1등입니다!!!
이번에는 명확한 상황에 맞춰
변화 하도록 해보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
a[href="https://naver.com"]{
color:green;
}
</style>
</head>
<body>
<a href="https://naver.com"><h1>Naver</h1></a>
<a href="https://daum.net"><h1>Daum</h1></a>
</body>
</html>a tag를 이용해서 hyperlink를 연결 할때
특정 링크를 가르키는 요소는 색깔을 바꾸는 방법을 적용했습니다.
위 코드를 실행한 모습은 아래와 같습니다 .
이어서 마우스가 올라간 상황을 설정해보겠습니다.
a:hover{}
이런 방식으로 설정하면 되는데
코드와 결과는 아래와 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
a[href="https://naver.com"]{
color:green;
}
a:hover{
color:red;
}
</style>
</head>
<body>
<a href="https://naver.com"><h1>Naver</h1></a>
<a href="https://daum.net"><h1>Daum</h1></a>
</body>
</html>
오늘은 여기 까지 하겠습니다!
다음에는 이어서
Responsive Design에 대해 알아보겠습니다.
'SW > html' 카테고리의 다른 글
| HTML (Hyper Text Mark-up Language) 시작하기 (0) | 2020.10.06 |
|---|
