개발 강의 정리/HTML&CSS

[HTML] CSS, 선택자

심사기 2021. 7. 1. 15:11

1. textarea

<body>
    <form action="">
        인사말 남기기<br>

        <textarea name="textarea"  rows="5" cols="60" ></textarea>
    </form>    
</body>

 

2. hidden

화면엔 보이지 않는 속성. 

<input type="hidden" name="age" value="23">

 

 

CSS(Cascading Style Sheet)

: 웹 페이지에 HTML 태그 보조하여 웹 페이지 꾸밈. 

body 태그 안에 있는 문서들을 Head태그 안의 Style 태그 내부에 있는 코드가 꾸며준다. 

 

 

 <head>
	<style>
            h3{color: red;}
            p{
                color: blue;
                background-color: yellow;
            }
        </style>
</head>

 

 

 

 

CSS선언 블록

 

선택자란? 
블럭 안에 있는 태그를 어디에 적용할것인지 선택하는 것. 

 

1. 태그 선택자

태그 영역을 선택하여 스타일을 적용한다. 

2. id 선택자 : #

고유한 한개의 요소에 스타일을 적용한다. 

 

id 속성의 목적은 정확히 한개의 요소를 식별하는 것이기 때문에 속성의 값은 반드시 고유해야한다!

=>아이디의 이름이 중복된다면 똑같은 스타일이 적용될뿐이지 오류는 나지 않는다.

     하지만 원래의 목적을 벗어나므로 그렇게 쓰지 말것! 

 

3. 클래스 선택자 : .

한개 이상의 요소에 스타일을 적용한다. 

 

동일한 스타일 속성을 여러 태그에 한번에 적용할때 사용한다. 

	 <style>
            p{  /*태그 선택자 or 타입 선택자 or 요소 선택자 */
                font-size: 14px;
                line-height: 180%;
            }

            #fly{ /*id 선택자: #으로 시작. id속성값은 현재 HTML문서에서 반드시 고유해야함*/

            /* 고유한 한개의 요소에 스타일 적용 */
                color: red;
                font-weight: bold;
            }

            .blue{ /* class 선택자 : .으로 시작 */
                    /* 공통의 스타일을 한개 이상의 요소에 적용 */
                color: blue;
            }
        </style>

 

 

 

 

Global 속성

Event 속성