Eggs Sunny Side Up
본문 바로가기
Web/HTML_CSS

[CSS] 시작

by guswn100059 2023. 3. 27.

<태그이름>월요일 아침입니다~~</태그이름> -> elememts
<> -> 시작태그
</> -> 끝태그
월요일~~ -> contents

h1~h6 -> 제목태그
p -> 본문태그, 단락 전체를 차지
span -> 본문태그, 입력해준 콘텐츠의 영역만큼 차지
a -> href 속성 안에 링크를 작성

ul(순서X), ol(순서O) -> 공간을 열어주는 태그
li -> 리스트에 실제 데이터를 담아주는 태그

img -> src 속성 안에 이미지 주소 작성
          alt 속성 안에 이미지 오류 시 보여줄 대체 텍스트 작성

table -> 테이블 만드는 공간
tr -> 테이블 안의 행을 만드는 공간
th(제목행), td -> 테이블 안의 실제 데이터를 담는 칸을 만드는 태그

form -> 입력 정보를 전달하는 공간
input -> 사용자로부터 값을 입력받음
            checkbox -> 다중선택가능 (취미 선택)
            radio -> 다중선택불가능 (성별 선택)
select -> 선택하는 공간
             option -> 데이터
input -> submit -> 제출 버튼
            reset -> 초기화 버튼

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 내부스타일 : HTML 문서 내에 style 요소를 생성 후 스타일 지정 -->
    <style>
        h1 {
            /* CSS 주석 작성 방법 : ctrl + /
            CSS 문법 작성 방법
            선택자 {속성 : 값; } */
            color: red;
        }

        h2 {
            color: orange;
        } 
    </style>

    <!-- 외부스타일 : link태그로 외부 파일에 접근하여 스타일 지정-->
    <link rel="stylesheet" href="./ex01시작.css">

</head>
<body>
    <h1>빨강</h1>
    <h2>주황</h2>
    <!-- 인라인스타일 : 요소 내 style 속성으로 스타일 지정 -->
    <h3 style="color: green; background-color: beige;">초록</h3>
</body>
</html>

 

h1 {
    text-decoration: underline;
}

'Web > HTML_CSS' 카테고리의 다른 글

[CSS] 우선순위  (0) 2023.03.27
[CSS] 선택자  (0) 2023.03.27
[HTML] form  (0) 2023.03.26
[HTML] 테이블  (0) 2023.03.26
[HTML] a태그  (0) 2023.03.26

댓글