CSS 기본

박종호·2024년 1월 8일
CSSfrontend
0

FrontEnd

목록 보기
5/17

🔴CSS란?

Cascading을 비유해보자면 폭포라고 생각해보자! css에도 우선순위가 있는데, External -> CSS in head -> inline CSS -> CSS applied by the user 순이다.
그럼 user는 개발자일까? 아님 브라우저를 사용하는 직접적인 사용자일까?
정답은 후자이다. 예를들어 사용자가 선택하는 다크모드 같은 설정이 최우선순위가 된다.

CSS 작성방법


신기하게도, html문서 내에서 style태그로 묶게되면, CSS 문법을 같이 쓰게된다!

주석처리

  • 한 줄, 여러 줄 모두 /* */ 로 작성한다!
/* 주석 */

🟠CSS 작성

인라인 방식

  • 태그 자체에 style 속성으로 스타일을 주는 방식입니다.
  • 일부 스타일 적용에 제한이 있습니다.( ex. :hover, ::before, ::after와 같은 가상요소에는 사용불가 )

@@@여기서 가상요소란?@@@
CSS를 통해서 html내의 컨텐츠에 가상으로 집어넣은 컨텐츠 같은 것!

<p **style="color:yellow; background-color:black;"**>Hello wold</p>

하지만, 현직자는 이렇게 작성하지 않는다고 하는데 어쩌지?

내부 스타일

  • head 태그 안 style 태그를 사용하여 스타일을 주는 방식입니다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>내부 스타일</title>
	**<style>
		p {
				color:yellow; 
				background-color:black;
		}
	</style>**
</head>
<body>
	<p>Hello world</p>
</body>
</html>
  • 코드가 길어질수록 HTML 파일 길이가 길어지기 때문에 효율적이지 않습니다.

외부 스타일

  • 현재 문서와 외부 리소스의 관계를 명시합니다.
  • 빈 태그로 속성만을 포함합니다
  • head 요소 내부에만 위치할 수 있습니다.
  • rel: relations 관계. 대상 파일의 속성을 나타냅니다. css 파일은 stylesheet
  • href: hyper-references 경로. 연결 시 참조할 파일의 위치를 나타냅니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko-KR">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>외부 스타일</title>
	**<link rel="stylesheet" href="style.css">**
</head>
<body>
	<p>Hello world</p>
</body>
</html>
/* style.css */
p {
		color:yellow; 
		background-color:black;
}
  • 해당 방법을 가장 권장합니다.
  • HTML과 CSS를 분리하면 코드의 가독성과 효율성이 모두 높아지기 때문입니다!
    요렇게 쭉 작성하다가?
    CSS의 마지막 선언은 세미콜론을 떼어도 된다!
    그리고 CSS를 불러올 때는 이런 식으로!

🟡CSS 상속

텍스트 모두 빨간색으로 바꾸기

<div>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</div>

CSS는 정답이 하나가 아니라 여러 가지 방법들이 있어요!

  1. 개별로 인라인 스타일 적용하기

    <div>
	<h1 style="color:red;">Hello</h1>
	<h2 style="color:red;">Hello</h2>
	<p style="color:red;">Hello</p>
</div>

  1. 태그 선택자 적용하기

    <div>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</div>
h1{color:red;}
h2{color:red;}
p {color:red;}

  1. 그룹 선택자(,)로 적용하기 

    <div>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</div>
h1, 
h2,
p {color:red;}

  1. 상속 이용하기

    <div>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</div>
div{
	color:red;
}

예를들어 상속 적용해보기!

상속(Inheritance)의 특징

  • CSS에는 상속되는 속성이 있고, 상속되지 않는 속성이 있습니다!
  • 앞에 본 div의 color 속성은 자식인 h1, h2, p에게 상속이 됩니다!
  • 하지만 width, height, margin, padding, border 와 같은 것은 상속되지 않습니다.
<div>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</div>
div {
	color: red;
	border: 5px solid pink;
}
  • inherit: 선택한 요소에 적용된 속성값을 부모와 동일하게, 즉 상속받게 합니다.
  • initial: 브라우저 기본 스타일 속성을 따르게 합니다.
<div>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</div>
div {
	color: red;	
	border: 5px solid pink;
}
h1 { **border: inherit;** }
  • 그리고 button , input 요소처럼 form 관련 태그들은 상속받지 않기도 합니다.
  • 이것은 브라우저별로 적용된 스타일이 있기 때문입니다.
<div>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
	<button>Hello</button>
  <input type="text" value="hello">
</div>
div {
	color: red;	
	border: 5px solid pink;
}
h1 { **border: inherit;** }

하지만 여기서 질문, 왜 이런 요소들은 상속이 되지 않는 것일까??
정답은 크기와 관련된 것들이라서!
엥...? 근데 왜...?
이유는 부모의 레이아웃이 변경되면 자식의 레이아웃까지 모두 변경되어 어지러웡

🟢CSS 선택자

전체 선택자

  • universal selector
  • html을 포함한 HTML 문서 내의 모든 요소를 선택합니다. * (별표, 애스터리스크) 사용하여 선택할 수 있습니다
* {
	margin:0;
	padding:0;
}

reset CSS를 알아보고싶은걸? 브라우저에 설정된 모든CSS를 초기화 시켜주는 방법인데?

타입(유형) 선택자 (태그 선택자, 요소 선택자)

  • type selector
  • 특정 태그를 선택합니다
h1 {
	font-weight:bold;
}
p{
	font-size: 24px;
}

아이디 선택자(#)

  • id selector
  • [주의사항] HTML 페이지 내에 id는 유일해야 합니다!
  • HTML 안에서 한 번만 사용되기 때문에 재사용성은 떨어집니다.
  • 아이디 속성은 JavaScript 또는 해시 링크와 함께 사용되는 경우가 많습니다.
<header id="header">
...
</header>
#header {
	padding: 10px;
}

클래스 선택자(.)

가장 많이 사용하는 선택자!

  • class selector
  • 클래스 선택자는 아이디 선택자와 다르게 한 페이지에 여러 개가 존재할 수 있습니다. 재사용성이 높습니다.
<h1 class="fc-red">hello wolrd</h1>
<p>Lorem ipsum dolor sit amt</p>
<p class="fc-red">Lorem ipsum dolor sit amt</p>
.fc-red {
	color: red;
}
💡 id, class는 숫자로 시작하면 안 됩니다! 하이픈(`-`) 과 언더바(`_`), 문자로만 시작할 수 있습니다.

특성 선택자([])

  • 주어진 특성을 가진 모든 요소를 선택합니다
[type="button"]{
	border:0;
	cursor:pointer;
}
[class="btn"]{
	color:#fff;
	background: royalblue;
}

그룹 선택자(,)

h1 {font-weight:bold;}
h2 {font-weight:bold;}
h3 {font-weight:bold;}
h4 {font-weight:bold;}
h5 {font-weight:bold;}
h6 {font-weight:bold;}
h1, h2, h3, h4, h5, h6{ font-weight:bold;}

복합 선택자

자손(하위) 선택자( ``)

  • 자식, 자손 모두를 선택할수 있다.
  • 공백, 띄어쓰기를 통해 구분합니다!
section p {
  border: 3px solid skyblue;
}

자식 선택자(>)

  • > 를 통해 구분합니다.
  • 직계자손만을 선택합니다.
section > p{
  color:royalblue;
}

일반 형제 선택자(~)

  • ~를 통해 구분합니다.
  • section 뒤에 나오는 형제만 선택합니다.
section ~ p{
  text-decoration:underline;
}

인접 형제 선택자(+)

  • +를 통해 구분합니다.
  • 바로 뒤에 인접한 형제만 선택합니다.
section + p{
  background:yellow;
}

업로드중..

가상 클래스 선택자

  • pseudo selectors
  • 선택자에 추가하는 키워드로 선택한 요소가 특별한 상태여야 만족할 수 있습니다!
    -html에는 없는 클래스지만, CSS로 마치 클래스가 있는 것처럼 선언할 수 있는 클래스!

가상 클래스

:link방문하지 않은 링크
:visited방문한 링크
:hover마우스 커서를 올려 놓았을 때
:active마우스로 클릭했을 때
:focus포커스 되었을때

구조적 가상 선택자

:first-child

  • 형제 요소 그룹 중 첫 번째 요소

:last-child

  • 형제 요소 그룹 중 마지막 요소
💡 body의 직계 자손의 경우 `:first-child` 선택자는 사용가능하지만, `:last-child` 선택자가 적용되지 않습니다.

:nth-child

  • 형제 사이에서의 순서에 따라 요소를 선택할 수 있습니다.
/* 2번째 li */
li:nth-child(2) {
  color: lime;
}
/* 홀수번째 li */
li:nth-child(odd) {
  color: lime;
}

/* 짝수번째 li */
li:nth-child(even) {
  color: lime;
}
/* 2n+1번째 li. (n은 0부터 1씩 증가합니다)*/
li:nth-child(2n+1) {
  color: lime;
}

:not

  • 부정 선택자 입니다
/* li 중 첫번째가 아닌 li */
li:not(:first-child){
	margin-top:20px;
}
profile
박종호
Hey🖐️
이전 포스트

HTML 연습1

다음 포스트

CSS 선택자 우선순

0개의 댓글

관련 채용 정보