CSS선택자

2024. 5. 17. 20:19HTML

CSS란.

 

- 마크업 언어(html)가 실제로 화면에 표시되는 방법을 기술하는 언어
(모양, 색상, 크기, 배경이미지, 움직임 등)

- 하나의 태그에 여러 css코드를 겹쳐서 원하는 스타일을 만들어냄

- W3C에서 CSS를 표준 스타일 서식방식으로 지정

- style 태그는 head안에 작성해도 되고 body안에 작성해도 됨
- head와 body 안이 아니라 다른 곳에 존재해도 됨
- 다만 head 안에 모아서 작성해주는 것이 암묵적인 룰이며 추후 수정하거나 추가 작업을 진행할 때 유용

 

 

CSS선택자

 

CSS로 꾸미기 설정을 진행할 때는 5가지 방법이 존재

1. 태그옆에 style="원하는 스타일 작성"
        <p style="font-size: large;">안녕하세요.</p>
       

2. head 태그 안에 style 태그를 작성해서 스타일 적용하는 방법

      1) 태그 이름을 작성한 후 스타일 적용
          <style>
              p{
                  font-size: large;
              }
          </style>

      2) 태그 옆에 class="변수명"을 설정한 다음 스타일 태그 안에서 변수명을 작성해준 후 서식 적용
         단, class를 이용해서 스타일을 적용할 경우 스타일 태그 안에  .변수명{} 로 작성해야함.  "." 반드시 표기
             <style>
                 .변수명{
                     color: yellowgreen;  
                 }
             </style>
             <p class="변수명">반갑습니다</p>
                
         3) 태그 옆에 id="변수명" 설정한 다음 style 태그 안에 변수명을 작성해준 후 스타일 적용
         단, id="변수명"으로 표기할 경우 style 태그 안에 #변수명()으로 작성해야함
         "#" 반드시 표기    
             <style>
                 #변수명2{
                     color: tomato;
                 }
             </style>
             <p id="변수명2">환영합니다</p>
            
         * 2(class), 3(id) 차이점
             style을 작성할 때는 class 안에 변수명을 작성해주는 게 좋음
             javascript에 관련된 코드를 작성할 때는 id안에 변수명을 작성해주는게 좋음

             class의 경우 여러 태그에 같은 스타일을 적용할 때 유용
             -> id보다 우선순위가 낮음

             id의 경우 특정한 기능을 가진 태그에 유일한 스타일을 적용할 때 유용
             -> 특별하게 스타일을 가져야하는 경우 사용하기 때문에 우선순위가 높음
             <style>
                 .클래스스타일{
                     color: brown;
                 }
                 #아이디스타일{
                     color: blue;
                 }

             </style>

             <p class="클래스스타일" id="아이디스타일">둘 중 더 우선순위는 id스타일</p>

         4) 태그에 작성된 특정 속성을 사용해 선택하는 선택자
         input[name] : input 태그 안에 존재하는 모든 name 속성값에 공통 설정
         위와 같이 작성할 경우 맨 마지막에 작성된 디자인이 적용

         만약 같은 속성(=name)에서 name="변수명" 특별한 디자인을 작성하길 원한다면
         input[name="변수명"]{} 작성해준 후 디자인 적용
         <style>
             input[name]{
                 background-color: aqua;
             }
             input[name="이름-1"]{
                 background-color: violet;
             }

         </style>
         <input name="이름-1"> <!--type안써도 디폴트가 text-->
         <input name="이름-2">

     3. .css 형식 파일을 이용해서 .css 파일 안에 css 코딩을 작성
         head 태그 안에 style 태그 대신 link 태그를 사용해서 작성
         <link> : 외부 css 파일과 연결하는 태그(css 파일 이외의 여러가지 다수 연결 가능)
             rel(relationship) : 연결하려는 파일이 어떤 종류인지
             href(hyper reference) : 참조하려는 파일의 위치(주소,경로 등)
             html 안에서 style 코드가 너무 길어질 경우 중복되는 코드를 파일 하나에 작성한 후 여러 파일에서 사용가능