[멋쟁이 사자처럼] CSS기초1 (CSS적용,선택자,여백)

5406 단어 CSS멋쟁이사자처럼CSS

CSS를 HTML 문서에 적용하는 방법 3가지

  1. CSS문서를 따로 만들어 연결하기
  • css파일을 따로 작성한 후 html파일에서 link태그를 달아 연결하는 방법
<head>
	<link rel="stylesheet" href="test.css">
</head>
  1. HTML 문서 의 태그 안에 작성하기
  1. HTML 문서 의 각 요소 안에 작성하기

선택자

선택자(Selector)란?
css로 스타일을 적용하기 위해 html요소를 선택하는 기능을 하는 요소

  • id : #을 앞에 붙여 사용한다. 한 문서 안에 id는 한번만 사용할 수 있다.
  • class : .을 앞에 붙여 사용한다. 한 문서 안에서 class는 여러번 사용할 수 있다
<style>
...
</style>

<body>
	<div class="myfirstclass">첫번째 클래스 요소</div>
	<div class="mysecondclass">두번째 클래스 요소</div>
	<div id="myfirstid">첫번째 아이디 요소</div>
	<div id="mysecondid">두번째 아이디 요소</div> //불가!
</body>

  • id의 속성이 class의 속성보다 우선순위가 높다. → 둘다 적용시 id 속성으로 덮어씌워짐

  • 복합 선택자: article > p {color: red;}

    article의 자식 선택자 중에 p태그를 가지는 요소들의 색을 빨간색으로 바꿈 (후손은 해당X)

  • 후손 선택자: article p {color: red;}

    article의 후손 선택자 중에 p태그를 가지는 요소들의 색을 빨간색으로 바꿈

Pseudo Class Selector

  • :link - 클릭하기 전 상태 a:link {color: black;}
  • :visited - 한번 들어가 본 상태 a:visited {color:green;}
  • :hover - 마우스를 올려놓은 상태 a:hover {background-color:pink;}

CSS 여백 속성

  • content: 표시하고 싶은 내용
  • padding: content와 border사이의 공간
  • border : 테두리
  • margin : 테두리 밖에 투명한 공간 , 객체와 객체 사이의 공간을 조정하고 싶을 때 수정
2021.06.16 (네이버 블로그 2,3)
백준 9012번(java)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage