'프론트엔드/html, css' 카테고리의 글 목록

프론트엔드/html, css

HTML기초 태그 정리

2022. 11. 23. 16:39

국제 민간표준화 기구의 홈페이지 : https://www.w3schools.com/tags/tag_hn.asp

HTML h1 to h6 tag

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

저작자표시

'프론트엔드 > html, css' 카테고리의 다른 글

HTML 기본 용어 정리 (0)	2022.11.23
Grid-area에 대해서 알아보자 (0)	2022.11.21

HTML 기본 용어 정리

2022. 11. 23. 16:25

요소

시작태그와 종료 태그로 이루어진 모든 것을 의미합니다.

태그

요소보다 작은 개념으로 시작 태그와 종료 태그가 있습니다. 태그 두개가 모여 하나의 요소가 됩니다.
ex) <p> </p>

속성

시작 태그 안에 쓰이는 것으로 요소를 더 자세하게 조작할 수 있습니다.
ex) <h1 align = "center">에서 align이 속성

변수

속성을 부여하기 위해선 변수를 지정해야 합니다.
ex)<h1 align = "center">에서 center가 변수

저작자표시

'프론트엔드 > html, css' 카테고리의 다른 글

HTML기초 태그 정리 (0)	2022.11.23
Grid-area에 대해서 알아보자 (0)	2022.11.21

Grid-area에 대해서 알아보자

2022. 11. 21. 10:34

그리드 영역을 정의하는 동시에 각 영역에 이름을 할당됩니다.

레이아웃을 직관적으로 만들기 위해 사용됩니다.

<html>

<body>
  <div class="container">
    <div class="header">HEADER</div>
    <div class="nav">NAV</div>
    <div class="section">SECTION</div>
    <div class="aside">ASIDE</div>
    <div class="footer">FOOTER</div>

  </div>
</body>

<css>

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  grid-template-rows: repeat(4, 200px);
  grid-gap: 1rem;
  grid-template-areas:
    'a a a'
    'b c c'
    'b d d'
    'e e e';
}

.header {
    grid-area: a;
    background-color: #d7bee2
}
 
.nav {
    grid-area: c;
    background-color: #a9c7d8
}
 
.section {
    grid-area: b;
    background-color: #c0df9f;
}
 
.aside {
    grid-area: d;
    background-color: #f2e5a6;
}
 
.footer {
    grid-area: e;
    background-color: #e89d9d;

}

<결과값>