본문 바로가기
Information

[수업 여섯번째 시간] 웹린이의 여섯번째 html 수업 시간

2play 2023. 9. 8. 21:25
반응형

css 작성 방법

 

타이틀과 헤드 태그 사이에 css 작성

a {color : red} -> a라는 태그를 만나면 빨간색으로 바꿔줘
<style type="text/css"></style> -> 예전에 쓰던 방식
<style></style> -> 지금 쓰는 방식

문법적으로 띄어쓰기 마구 사용해도 문제없지만 사용x권장
(들여쓰기나 띄어쓰기도 다 글자로 인식하기 때문)

        {
            property(속성 : 무슨 효과) : value(값 : 효과를 얼만큼 줄거냐 라는 뜻) ;(그리고)
        }

<!---->   html상 주석
/*   */    css3상 주석



css3에서는 베이직한 선택 방법 위주로 사용(selector)

# : 요소 선택자(≒태그, element)

색상 사용시 : colorName / colorCode(ex : #aabbcc, #abc -> 여섯자리 또는 세자리임) / rgb(rgba ->a는 투명도까지 추가해서 사용하는 것, 0~1까지 사용하면 됨)

웹에서 쓰는 컬러모드 : RGB (16, 180, 230)



개발자가 직접 만드는 스타일 -> # 사용자 정의 스타일 : 클래스 방식&아이디 방식

        # 사용자 정의 스타일 : 클래스 방식 (대소문자 구분 必)
        1. 작성 :  .클래스이름 { 효과 작성 }
        (클래스 이름은 내가 만드는거고 웬만하면 _사용하는게 좋음)
        2. 적용 : <elem class="클래스이름">

        # 사용자 정의 스타일 : 아이디 방식(현재 이방식 잘 사용 x)
        1. 작성 :  #클래스이름 { 효과 작성 }
        (클래스 이름은 내가 만드는거고 웬만하면 _사용하는게 좋음)
        2. 적용 : <elem class="클래스이름">

 

 

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스타일 작성</title>
    <style type="text/css">
        /*
        selector(선택자 : 누구한테){
            property(속성 : 무슨 효과) : value(값 : 효과를 얼만큼 줄거냐 라는 뜻) ;
            property(속성 : 무슨 효과) : value(값 : 효과를 얼만큼 줄거냐 라는 뜻)
        }
        */

        /*
         # 태그 (재)정의 스타일 : 요소 선택자
          1. HTML 태그에 직접 효과 작성
          2. 해당 태그에 모두 자동으로 같은 효과 적용


        */
       


        /*
         # 다중 선택자
         1. 여러 개의 요소에 같은 효과 작성
        h2 {font-family:"궁서"}
        p{font-family:"궁서"}

        or
        h2, p {font-family:"맑은고딕"}

        */


        /* # 자식 요소 선택자 : 자식 요소만 선택이 됨 */
        div > a {
            font-size: 30px
        }


        /* # 후손 요소 선택자 : 자식 요소, 후손 요소 모두 선택 가능 */
        div a {
            font-size: 30px;
            background:tomato
        }


        h2, p {font-family:"맑은고딕"}
        body{
            background: #ddd
        }
        a{
            text-decoration:none
        }
        p{
            color:tomato
        }

        /*
        # 사용자 정의 스타일 : 클래스 방식
        1. 작성 :  .클래스이름 { 효과 작성 }
        2. 적용 : <elem class="클래스이름">
               */
     .bg{
            background:teal
        }

        /*
        # 사용자 정의 스타일 : 아이디 방식
        1. 작성 :  #아이디이름 { 효과 작성 }
        2. 적용 : <elem id="아이디이름">
        3. 하나의 이름을 여러 번 적용 가능하지만
        하나의 이름은 같은 페이지에서 한번만 사용하는 것이 원칙
        */
        #brd{
            border: 4px solid yellow
        }
    </style>
</head>
<body>
    <h2 class="bg">제목 텍스트</h2>
    <p id="brd">내용 텍스트</p>
    <p class="bg">내용 텍스트</p>
    <p id="brd">내용 텍스트</p>

    <a href="#">링크 텍스트</a>

    <div>
        <p>
            <a href="#">div > p > a 요소</a>
        </p>
    </div>

    <div>
        <a href="#">div > a 요소</a>
    </div>
</body>
</html>
728x90
반응형
저작자표시

'Information' 카테고리의 다른 글

[수업 일곱번째 시간] 웹린이의 일곱번째 html 수업 시간  (0) 2023.09.13
[수업 다섯번째 시간] 웹린이의 다섯번째 html 수업 시간  (0) 2023.09.12
[수업 다섯번째 시간] 웹린이의 다섯번째 html 수업 시간  (0) 2023.09.05
[수업 네번째 시간] 웹린이의 네번째 html 수업 시간  (0) 2023.08.30
[수업 세번째 시간] 웹린이의 두번째 html 수업 시간  (0) 2023.08.25

'Information' Related Articles

티스토리툴바