#시맨틱 태그 #header #hn #article #section #footer #address


시맨택 태그: 문서 구조를 태그 이름만 봐도 쉽게 이해 할 수 있도록 해 놓은것






■ 정리

- 헤더(header) : 머리말 지정하기 

- nav : 동일 사이트안의 문서나 다른 사이트의 문서로 연결하는 링크 모음


















■문제1



■조건

- 애완경 종류, 입양하기, 건강돌보기, 더불어살기

- <h1>: 애완견 종류는

- <h2>: 활달한 강아지

- <h3>: 요크셔테리어, 말티즈, 포메라이언, 골든 리트리버,

- <p>: 나머지


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
    <header>
        <h1>애완견 종류</h1>
        <nav>
            <ul>
                <li><a href="#">애완견 종류</a></li>
                <li><a href="#">입양하기</a></li>
                <li><a href="#">건강돌보기</a></li>
                <li><a href="#">더불어살기</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h2>활달한 강아지</h2>
        <article>
                <h3>요크셔테리어</h3>
                <p>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁내는 일이 없어 좋은 번견이고 우리나라 최고의의 가정견으로 자리 잡고 있다.</p>
        </article>
        <article>
                <h3>말티즈</h3>
                <p>애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.</p>
        </article>
        <article>
                <h3>포메라이언</h3>
                <p>활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다.</p>
        </article>
        <article>
                <h3>골든 리트리버</h3>
                <p>이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는실내에서도 많이 길러지고 있다.</p>
        </article>
    </section>
    <footer>
        <p>published by funnycom</p>
    </footer>
</body>
</html>
cs





저작자표시 비영리 동일조건 (새창열림)

'HTML과 CSS' 카테고리의 다른 글

1.기본 설정  (0) 2019.05.02
[ html css] 기초 태그  (0) 2018.12.19
margin과 padding의 개념 및 차이점  (0) 2018.11.21

■ 마진과 패딩의 개념

마진: 여백, 여유

패딩: 속을 넣다, 채워 넣다

보더: 경계



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
 
    <style>
      p{
        background : blue;
        color:white;
      }
    </style>
 
  </head>
  <body>
    <p>
      welcom to 코딩 독학
    </p>
 
    <p>
      welcom to 코딩 독학
    </p>
 
 
  </body>
</html>
 
cs


결과


1
2
3
4
5
6
7
<style>
      p{
        background : blue;
        color:white;
        padding: 50px;
      }
</style>
c메s

padding 을 50px을 주면?

top, bottom, left, right가 50px가 들어 간다.


1
2
3
4
5
6
7
8
<style>
      p{
        background : blue;
        color:white;
        padding: 50px;
        margin: 50px;
      }
</style>
cs



요렇게 적용이 됩니다 :)



※참고

paddding : 0 10 20 30;

paddding : [상] [우] [좌] [하] ;

margin : [상] [우] [좌] [하] ;

저작자표시 비영리 동일조건 (새창열림)

'HTML과 CSS' 카테고리의 다른 글

1.기본 설정  (0) 2019.05.02
[ html css] 기초 태그  (0) 2018.12.19
시맨틱 태그들  (0) 2018.11.26


점보트론

점보트론(jumbotron)은 대형전광판을 의미하는 단어.

여기서 점보트론은 메인 전광판을 의미한다. 

점보트론 안에는 다양한 컴포넌트가 포함이 가능함.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <mata name="viewport" content="width=device-width, initial-scale=1.0"></mata>
    
    <!--css 연결-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>코딩 독학</title>
  </head>
 
  <body>
 
  <!--jumbotron 부분-->
   <div class="container">
      <div class="jumbotron">
        <h1 class="text-center">코딩 독학을 소개합니다.</h1>
        <p class="text-center">코딩 독학은 It 교육 자료 입니다. 다양한 IT 유료 및 강의가 들어 갑니다.</p>
        <p class="text-center"><a class="btn btn-primary btn-lg" href="#" role="button">강의 들으러 가기</a></p>
      </div>
    </div>
 
  </body>
 
</html>
cs


결과


1)container사용

bootstrap의 css안에 있는 bootstrap.css의 파일 안에 contianer 적용  

   ※padding, margin - html과 css padding과 마진 부분을 참고하세요

1
2
3
4
5
6
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
cs









2)jumbotron
1
2
3
4
5
6
.jumbotron {
  padding: 30px 15px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
}
cs
 
#eee는 회색

3)text-center
1
2
3
.text-center {
  text-align: center;
}
cs

#e



스타일 시트(CSS)는 자신이 작성하고 있는 HTML 문서를 디자인을 꾸미고자 할때 작성

부트스트랩도 css/bootstrap.css 이 있어서 기본적인 스타일 시트를 갖추고 있음.

하지만 자기만의 스타일로 꾸미고 싶다면 따로 추가를 한다.

1
2
3
4
5
6
7
8
9
<!--스타일 적용-->
<style type="text/css">
      .jumbotron{
        background-image: url('images/index_main.jpg');
        background-size: cover;
        text-shadow: black 0.2em 0.2em 0.2em;
        color:white;
      }
</style>
cs


점보트론에 이미지 추가하는 방법

backgroud-url : [이미지 주소]

backgroud-size: 

text-shadow: [색깔] [글자 그림자]

color : [글자 색상]





■ 참고

안경잡이 개발자 - 점보트론

https://www.youtube.com/watch?v=jcmT5UPyDcc&list=PLRx0vPvlEmdAZ-wT8pwVJn5GBp5a5aVGy&index=2

'부트스트랩' 카테고리의 다른 글

2. 홈페이지 제작  (0) 2018.12.05
1.홈페이지 제작  (0) 2018.11.30

+ Recent posts

티스토리툴바