[포스코x코딩온] 기본 CSS 정리

[포스코x코딩온] 웹개발자 풀스택 부트캠프8기 2023. 7. 5. 21:16

728x90

CSS(Cascading Style Sheet)

웹 페이지를 디자인하기 위해 사용하는 언어

CSS 참조 방식

인라인(inline) 방식: <body> 안에 태그마다 스타일 작성 / 같은 스타일을 가진 태그 모두에게 복붙을 해야 하는 귀찮음이 발생한다.

<body>
<div style="background-color: black; width: 100px; height: 50px; border: 0px">
</body>

내장 Style: <head> 태그 내부에 <style>태그를 선언하여 사용 / 선언을 하면 태그마다 같은 스타일이 적용이 가능하다. / 다른 HTML 파일에는 사용할 수 없는 단점이 있다.

<head>
    <style>
          /* 내장 style로 모든 p태그에 적용됨 */
          p {
            font-size: 20px;
            text-align: center;
            margin: 0px;
            line-height: 200px;
          }
    </style>
</head>

링크 방식: 모든 Style을 하나의 CSS 파일에 넣고, 필요한 HTML 파일에서 해당 파일을 링크해서 사용 / 제일 유용하게 사용할 수 있다.

/* css에서 링크 방식을 사용하는 방법  */
div {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-color: lightgray;
}
----------------------------------------------------
<head>
    <!-- css의 링크 방식으로 사용 -->
    <link rel="stylesheet" href="./230705_css.css" />
</head>

CSS 구조

p{color: red; padding:5px;}

p : 선택자(Selector)로 HTML의 요소를 선택한다.

color, padding : 속성(Property)로 여러 개의 프로터피 지정 가능(:으로 구분)/ 표준 스펙으로 이미 지정되어 있는 것을 사용

red, 5px : 값(Value)로 해당 속성에 사용할 수 있는 값 지정

CSS 선택자

기본 선택자

전체 선택자(Universal Selector)	*	전체 선택
태그 선택자(Type)	태그 이름	작성된 태그만 선택
Class 선택자(Class)	.Class	클래스 선택
ID 선택자(ID)	#id	아이디 선택

<!-- 실습 기본 선택자 연습하기 -->
    <div>
      <h1>기본 선택자 연습해보기</h1>
      <p>기본 선택자 연습을 해보아요!</p>
      <span>안녕하세요</span>
      <ol>
        <li id="first">1</li>
        <li class="second">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ol>
    </div>

/* 전체 선택자 * */
* {
  color: red;
}

/* 태그 선택자 */
li {
  color: red;
}

/* 클래스 선택자 */
.orange {
  color: orange;
}

/* 아이디 선택자 (아이디 선택자가 클래스 선택자보다 우선순위 높음)*/
#orange {
  color: blue;
}

복합선택자

일치 선택자(Basic Combinator)	span.orange	span태그와 orange클래스 동시 만족
자식 선택자(Child)	ul > .orange	ul태그의 자식요소중 orange클래스 선택
후손 선택자(Descendant)	div .orange (띄어쓰기가 포인트)	div태그의 하위요소중 orange클래스들 선택
인접 형제 선택자(Adjacent Sibling)	.orange + li	orange클래스의 다음 형제 요소중 첫번째 li태그 선택
일반 형제 선택자(General Sibling)	.orange ~ li	orange클래스의 다음 형제 요소중 모든 li 태그 선택

아래 코드를 예시로 보시면 됩니다.

<div>
      <ul>
        <li>사과</li>
        <li>딸기</li>
        <li id="orange" class="orange">오렌지1</li>
        <li>망고</li>
        <li>포도</li>
        <p><span class="orange">오렌지2</span></p>
      </ul>
      <div>당근</div>
      <p>토마토</p>
      <span class="orange">오렌지</span>
      <p>파인애플</p>
    </div>

/* 일치 선택자 */
span.orange {
  color: red;
}

/* 자식 선택자 */
ul > .orange {
  color: blue;
}
/* 하위 선택자 */
ul .orange {
  font-weight: bold;
}

/* 인접 형제 선택자 (바로 다음 요소에만 적용됨)*/
.orange + li {
  font-size: 30px;
}

/* 일반 형제 선택자(뒤에 오는 모든 요소에 적용됨) */
.orange ~ li {
  color: green;
}

실습

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./230705_practice3.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>복합선택자 사용 연습</h1>
    <p>동물원에 왔어요</p>
    <div class="zoo">
      <ul>
        <span>여긴 사파리!</span>
        <li>곰</li>
        <li id="tiger">호랑이</li>
        <li>팬더</li>
        <span class="lion">사자1</span>
        <li class="lion">사자2</li>
        <li>사육사 sarah</li>
        <li>사육사 세령</li>
      </ul>
      <span class="lion">사파리 밖의 사자</span>
    </div>
    <p class="lion">야생의 사자</p>
  </body>
</html>

p.lion {
  background-color: red;
}

ul > .lion {
  background-color: greenyellow;
  font: bold;
}

#tiger {
  background-color: yellow;
}

.lion {
  color: sienna;
}

#tiger + li {
  background-color: skyblue;
}

li.lion ~ li {
  background-color: orange;
}

가상 클래스

HOVER	a:hover	a 태그에 마우스 커서가 올라가 있는동안
ACTIVE	a:active	a태그에 마우스를 클릭하고 있는 동안
FOCUS	input:focus	input태그에 칸을 클릭했을때
FIRST CHILD	.fruits span:first-child	fruits클래스중 span태그가 첫번째순서 일때 실행
LAST CHILD	.fruits h3:last-child	fruits클래스중 h3태그가 마지막순서 일때 실행
NTH CHILD	.fruits span:nth-child(n) (*은 모든 태그를 의미함으로 n번째 태그를 선택하여 실행) (2n, 2n+1등으로 홀수번째 짝수번째 선택가능)	fruits클래스중 span태그가 n번째순서 일때 선택
NOT	.fruits *:not(span)	fruits클래스중 span태그가 아닌 요소들 선택 (속성을 사용하고 싶을때는 [ ] 쓰기)

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./230705_practice4.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>마우스를 올리면 빨간색이 됩니다.</h1>
    <a href="https://www.naver.com">클릭하고 있으면 배경이 파란색이 됩니다.</a>
    <input type="text" />
  </body>
</html>

h1:hover {
  color: red;
}

a:active {
  background-color: blue;
}

input:focus {
  background-color: orange;
}

결과

다른 실습

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./230705_practice5.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="stripes">
      <div>navy</div>
      <div>yellow</div>
      <div>navy</div>
      <div>yellow</div>
      <div>navy</div>
      <div>yellow</div>
      <div>navy</div>
      <div>yellow</div>
      <div>navy</div>
      <div>yellow</div>
    </div>
  </body>
</html>

.stripes div:nth-child(2n) {
  background-color: yellow;
}

.stripes div:nth-child(2n + 1) {
  color: white;
  background-color: navy;
}

가상 요소

BRFORE	.box::before{ content: "택시"; }	box클래스 내부 앞에 content 삽입
AFTER	.box::after{ content:"빨리"; }	box클래스 내부 뒤에 content 삽입

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./230705_practice6.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">여기요</div>
  </body>
</html>

.box::before {
  content: "택시";
}

.box::after {
  content: "빨리";
}

속성 선택자

ATTR	[disabled]	disabled의 속성을 포함한 모든 요소 선택
ATTR=VALUE	[type="password"]	type의 속성 중에 password의 요소인 경우 선택

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./230705_practice7.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" placeholder="이름" />
    <input type="password" value="pw" />
    <input type="text" value="000-0000-0000" />
    <input type="text" placeholder="핸드폰" />
    <input type="text" placeholder="주민번호" disabled />
  </body>
</html>

input[disabled] {
  background-color: red;
}

input[placeholder="이름"] {
  background-color: orange;
}

input[value] {
  background-color: blue;
}

기본 CSS에 대해서 공부하고 배웠다. CSS를 활용하여 화면을 디자인한다는 것을 알게 되었다. 나는 기능적인 부분만이 중요한 것이 아니라 디자인 부분도 매우 중요하다고 생각한다. 그래서 CSS을 활용하여 화면을 사용자가 사용하기 편리하게 만들 것이다.

Github코드(230705폴더): https://github.com/DongHo-Kang/KDT-8-web.git

GitHub - DongHo-Kang/KDT-8-web

Contribute to DongHo-Kang/KDT-8-web development by creating an account on GitHub.

github.com

728x90

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

[포스코x코딩온] 전환-Transform, Transition / Animation (0)	2023.07.08
[포스코x코딩온] CSS-Position, Stack order, 배경, Display (0)	2023.07.07
[포스코x코딩온] CSS의 속성 (0)	2023.07.06
[포스코x코딩온] HTML의 기본 태그 (0)	2023.07.04
[포스코x코딩온] 웹개발자 풀스택 과정 OT (0)	2023.07.03

ABOUT ME

개발로 가치를 찾는 개발자 개발로 가치를 찾는 개발자

CSS(Cascading Style Sheet)

CSS 참조 방식

CSS 구조

CSS 선택자

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

티스토리툴바

ABOUT ME

CSS(Cascading Style Sheet)

CSS 참조 방식

CSS 구조

CSS 선택자

'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바