CSS selector: html에 작성한 요소에 접근하는 방법

 

CSS Style 적용방법

inaternal: HTML문서 내에서 CSS style 적용

<html>
<style>
	h1 {color: red}
</style>
<body>
	<h1>inaternal</h1>
</body>
</html>

 

external: HTML문서 내에서 CSS파일 연동하는 방법

<lin rel="stylesheet" href="css파일경로.파일명.확장자">

 

inline: 태그 내에서 style 적용

<html>
<body>
	<h1 style="color: red;">inaternal</h1>
</body>
</html>

 

 

Selector: 요소 접근 방법

전체 selector: 모든 요소에 접근

* { }

 

태그 selector: 태그에 접근

div { }

p { }

 

Class selector: 클래스에 접근

.container{ }

 

Id selector: 아이디에 접근

#container { }

 

자식 selector: 부모의 밑에 있는 자식 요소에 접근

body > div { }

 

'Coding > HTML & CSS' 카테고리의 다른 글

[CSS] CSS란?  (0) 2022.02.08
[HTML] Layout(레이아웃)  (0) 2021.05.28
[HTML] TAG(태그)  (0) 2021.05.28
[HTML] HTML 이란?  (0) 2021.05.27

CSS(Cascading Style Sheets)란?

  • 사용자에게 문서를 표시하는 방법을 지정하는 언어이다.
  • HTML로 웹 페이지의 틀을 제작하고 거기에 디자인을 해주는 것이 바로 CSS이다.

CSS의 특징

  1. 규칙 기반 언어이다.
  2. 웹 페이지의 제목 및 링크의 색상과 크기 변경을 할 수 있다.
  3. 웹 페이지의 레이아웃을 만드는데 사용할 수 있다.
  4. 애니메이션과 같은 효과도 만들 수 있다.

참고자료

 

 

'Coding > HTML & CSS' 카테고리의 다른 글

[CSS] selector  (0) 2022.05.02
[HTML] Layout(레이아웃)  (0) 2021.05.28
[HTML] TAG(태그)  (0) 2021.05.28
[HTML] HTML 이란?  (0) 2021.05.27

Layout(레이아웃) 구성

  • header : 머리말 (페이지 제목, 페이지 소개)
  • nav : 탐색 링크 정의
  • section : 문서의 장이나 절에 해당
  • article : 본문과 독립적인 콘텐츠 영역
  • aside : 본문 이외의 content를 정의
  • footer : 꼬리말 (저자, 저작권 정보)

<Layout 기본 구성>

 

실제 레이아웃 구성 화면

더보기 
<!DOCTYPE html>
<html lang="ko">

<header>
    <meta charset="uft-8">
    <title>Layout(레이아웃) 기본구성</title>
    <style>
        * { margin:0; padding:0; box-sizing:border-box; }  <!-- 공백 제거 -->
        #frame{
            background-color: white;
            width: 1000px;
            height: 900px;
            margin: 0 auto;
            font-size: 20px;
            text-align: center;
        }
        #header_style{
            background-color: skyblue;
            width: 1000px;
            height: 100px;
        }
        #nave_style{
            background-color: silver;
            width: 1000px;
            height: 100px;
        }
        #side_left{
            background-color: yellowgreen;
            width: 300px;
            height: 600px;
            float: left;
        }
        #section_style{
            background-color: white;
            width: 400px;
            height: 600px;
            float: left;
        }
        #side_right{
            background-color: yellowgreen;
            width: 300px;
            height: 600px;
            float: left;
        }
        #footer_style{
            background-color: yellow;
            width: 1000px;
            height: 100px;
            clear: both;
        }
    </style>
</header>
<body>
    <div id="frame">
        <div id ="header_style">
            <h2>header</h2>
        </div>
        <div id ="nave_style">
            <h2>NAV</h2>
        </div>
        <div id="side_left">
            <h2>left side</h2>
        </div>
        <div id ="section_style">
            <h2>section</h2>
        </div>
        <div id="side_right">
            <h2>right side</h2>
        </div>
        <div id ="footer_style">
            <h2>footer</h2>
        </div>
    </div>
</body>
</html>

 

'Coding > HTML & CSS' 카테고리의 다른 글

[CSS] selector  (0) 2022.05.02
[CSS] CSS란?  (0) 2022.02.08
[HTML] TAG(태그)  (0) 2021.05.28
[HTML] HTML 이란?  (0) 2021.05.27

TAG(태그)

태그를 사용 시 <div><strong>  </div></strong>과 같이 열리고 닫히는 태그의 순서가 꼬이지 않도록 해야 합니다.

순서가 꼬이게 된다면 유효성 검사를 통과하지 못하고 또한, 유지보수에 어려움을 겪을 수 있습니다.

 

올바른 예 : <div><strong></strong></div>

 

닫지 않아도 되는 태그

<img>, <br>, <meta>

area, base, embed, hr, param, source, keygen, link, input, command, col

 

태그 내용

태그 안에는 태그 명, 속성 명, 속성 값, 내용이 존재한다.

속성 값을 작성시 ""(따옴표)를 사용하여 지정해야 한다.

 

<태그 사용 예>

태그 종류

1) 글자태그

  • h1 ~ h6 : 제목 
  • p : 문단, br : 줄바꿈, hr : 줄긋기
  • a : 하이퍼링크 생성
  • b, i, small, sub, sup, ins,del : 글자 모양 지정

2) 목록 태그

  • ul : 순서가 없는 목록 생성 
  • ol : 순서가 있는 목록 생성
  • li : 목록 요소 생성

3) 테이블 태그

  • table : 표 생성
  • caption : 테이블의 제목이나 설명을 작성하는 태그
  • th : 테이블 헤더 부분
  • tr : 테이블 행 (세로)
  • td : 테이블의 열 (가로)

4) 미디어 태그

  • img : 그림 삽입
  • audio : 소리 삽입
  • video : 비디오 삽입

'Coding > HTML & CSS' 카테고리의 다른 글

[CSS] selector  (0) 2022.05.02
[CSS] CSS란?  (0) 2022.02.08
[HTML] Layout(레이아웃)  (0) 2021.05.28
[HTML] HTML 이란?  (0) 2021.05.27

HTML 이란?

Hyper Text Markup Language의 약자이며 Webpage를 만들기 위해 사용하는 언어입니다.

기본적으로 HTML로 파일을 작성 시 *<!DOCTYPE html>, <html></html>을 정의하고 파일명.html로 저장해야합니다.

 

*<!DOCTYPE html>은 현재 가장 많이 사용되는 버전인 HTML5를 사용할 때 정의 합니다.

 

태그 (TAG)

HTML로 Webpage를 제작할 때 사용하는 것을 태그(TAG)라고 하며 태그 사용 시 <>를 사용하여 표현합니다.

태그의 사용방법은 <h1>제목태그</h1> 보통은 앞과 같이 처음과 끝을 지정해 줘야 하지만

<br> 또는 <br/>(줄바꿈 태그)와 같이 끝을 지정하지 않아도 되는 태그가 존재합니다.

 

HTML의 기본구조

여기서 <!-- -->를 주석이라 하며  코드를 설명하는 부분을 작성할 때 사용합니다.

주석을 쓰게되면 HTML문서의 변형이 이루어지는 것은 아닙니다.

한국어 오류가 나는 경우가 있기 때문에 <meta charset="utf-8"> 코드를 추가하여 문자를 인코딩 시켜줍니다.

<!DOCTYPE html>    <!-- HTML version 지정 -->
<html>             <!-- HTML의 큰 틀 -->
    <head>         <!-- HTML의 메타데이터 정의 부분 -->
      <meta charset="utf-8">
      <title> 제목 </title>
    </head>
    <body>         <!-- HTML의 본문이 들어가는 부분 -->
      본문
    </body>
</html>

 

HTML5 주요 기능

  • 멀티미디어 : 플러그인 도움 없이 음악과 동영상 재생이 가능하다.
  • 그래픽 : 2차원, 3차원 그래픽을 구현할 수 있다.
  • 통신 : 서버와 실시간을 쌍방향 통신을 수행 할 수 있다.
  • 장치 접근 : 장치의 정보와 기능을 사용할 수 있다.
  • 오프라인 및 저장소 : 인터넷이 연결되지 않아도 응용 프로그램 동작이 가능하다.
  • 시맨틱 : 정보를 분석, 자료를 검색 및 처리해서 제공하는 지능형 웹이다.
  • CSS3 스타일 시트 : 3차원 변환과 애니메이션 효과를 적용 가능하다.
  • 웹의 성능 극대화 및 통합

 

 

'Coding > HTML & CSS' 카테고리의 다른 글

[CSS] selector  (0) 2022.05.02
[CSS] CSS란?  (0) 2022.02.08
[HTML] Layout(레이아웃)  (0) 2021.05.28
[HTML] TAG(태그)  (0) 2021.05.28

+ Recent posts

티스토리툴바