Notice
Recent Posts
Recent Comments
Link
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

개발공부일지

CSS 1 (선택자/ display/ position/단위/색상) 본문

Intro

CSS 1 (선택자/ display/ position/단위/색상)

보람- 2023. 6. 15. 16:30

목차

1. CSS

2.  다양한 선택자

2-1 주요 선택자

2-2 결합자

2-3 의사클래스/요소

3. display

 

4. position

 

5.그외에

5-1 text에 관한 css

5-2 background 이미지를 넣을때

5-3 overflow

5-4 길이/크기 단위

5-5 색상을 나타내는 방법

 

 

1. CSS

 

- Cascading Style Sheets

- index.css 파일 만들기

- <head>속에 <link rel="stylesheet" href="/index.css" /> 입력해서 만들어둔 파일 연결하기

- <head>속에 <style></style>태그를 만들어서 style을 적용할수도있음

- { } 속에 ;으로 구분지어서 적기

 html,body {
       margin:0;
       padding:0;
}

 


2.  다양한 선택자

 

 2-1 주요 선택자
  - * : 전체 선택자로 모든 엘리먼트에게 전부 적용함

  - 유형선택자 : 엘리먼트 이름을 선택자로 사용함 → div, html, body

  - class 선택자 : 앞에 .을 붙여서 사용함 →  .abc

  - id 선택자 :  →  #root
  - 특성 선택자 : 엘리먼트의 속성을 찾아서 일치하는 엘리먼트에게 css 속성을 적용함 →  [targer="_blank"]

 2-2 결합자
  - combinator

#parent .child {
        /*  ` `는 자손 결합자, 부모를 기준으로 하위 모든 선택자를 찾는다 */
        font-size: 2rem;
}
 #parent > .child {
        /* 자식 결합자 : > , 바로 아래의 자식에게만 적용*/
        font-size: 1.5rem;
}

.grandson ~ .granddaughter {
        /* 형제 결합자 ` ~ `  같은 부모를 가진 엘리먼트들 중 현재 엘리먼트의 뒤에있는 엘리먼트를 찾는다*/
        color: rgba(0, 0, 0, 0.5);
}

.grandson + .granddaughter {
        /*  +는 인접형제 결합자, 바로 뒤에 있는 형제를 찾는다 */
        color: rgba(255, 0, 0, 0.5);
}

 

 2-3 의사 클래스/요소

 

  - 의사 클래스 : pseudo class , `:` 을 사용 → 예를들면   :hover ,  :nth-child()

  - 의사 요소 : pseudo element, `::` 을 사용 → 예를들면  ::after ,  ::before

 

 

3. display

 

- block

- inline

- inline-block

 

 

4. position

 

- relative

- absolute

- fixed

 

 

5. 그외에 

 

  5-1 text에 관한 css

   - font의 색상, 크기, 굵기, 그림자, 정렬

#css-file .text {
  color: crimson;
  font-size: 2rem;
  font-weight: 900;
  font-family: "굴림";
  font-family: "돋움";
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  font-style: oblique;
  font-style: normal;
  text-shadow: 0 0 2px black;
  text-shadow: 10px 10px 0 black;
  text-align: center;
  text-align: end;
  text-decoration: underline solid blue;
  text-decoration: overline dotted black;
  text-decoration: line-through dashed green;
  text-decoration-color: red;
  text-transform: uppercase;  /* 대문자 */
  text-transform: lowercase;  /* 소문자 */
  text-transform: capitalize;  /* 맨앞글자만 대문자로 바꿔줌 */
  letter-spacing: 20px;  /* 문자와 문자사이 간격조절 */
  line-height: 100px;   /* 줄 간격 */
  font-family: "Orbit", sans-serif;
}

 5-2 background 이미지를 넣을때

#css-file .background div {
  width: 200px;
  height: 200px;
  display: inline-block;
}

#css-file .background :nth-child(1) {
  background-color: #f00;
  background-image: url("pexels-kristina-paukshtite-5429261.jpg");
  background-size: contain;
  /* 영역내에서 이미지가 다들어가도록 맞추면서 남는곳은 반복해 */
  background-repeat: no-repeat;
  background-position: center;
}

#css-file .background :nth-child(2) {
  background-color: #ff0;
  background-image: url("pexels-kristina-paukshtite-5429261.jpg");
  background-size: cover;
  /* 비율에맞게 확대축소 다채워 */
  background-position: center;
}

#css-file .background :nth-child(3) {
  background-color: #f0f;
  background-image: url("pexels-kristina-paukshtite-5429261.jpg");
  background-size: 100px 100px;
  background-repeat: repeat-y;
  background-position: bottom right;
}

#css-file .background :nth-child(4) {
  background-color: #0ff;
  background: linear-gradient(45deg, blue 10%, red 50%, blue 90%);
  background: radial-gradient(red, blue);
}

5-3 overflow : auto, scroll, visible, hidden

 

5-4 길이/크기 단위

- px
- in
- % 
  - 보통 부모의 길이를 기준으로 0%~100%까지

- vw, vh 
  - viewport width, viewport height 
  - %와 마찬가지로 0~100 까지이며 화면크기를 기준으로 한다.

- em 
  -부모의 font-size를 기준 
  - 부모의 폰트가 16px일때 자식 엘리먼트에게 1em을 설정할 경우 16px로 적용된다.

- rem (반응형에서 설정-추천) 
  - root em, 최상위 엘리먼트의 font-size를 기준 
  - html이 최상위 엘리먼트 
  - html의 font-size가 32px, div의 font-size를 2em으로 설정했을때 출력되는 크기는 64px

 

5-5 색상을 나타내는 방법

 

1. 이름 그대로 입력

<style>
*{
    color:red;
    color:green;
}
<style>

 

2. `#`을 사용하여 16진수로 입력

 

  - `#`뒤의 16진수를 2개씩 3개로 나누어 각각 red, green, blue를 뜻한다.
  - ff : 10진수로 255를 뜻함
  - 0~9 다음은 10 =>10진수
  - 16진수는 15까지는 하나의 문자로 나타내야함
      - 10=a, 11=b, ... 15=f
      - 16진수 10을 10진수로 바꾸면 16
      - 16진수 15를 10진수로 바꾸면 21 (16+5)

<style>
*{
    color:#ffffff;
    color:#000000;
    color:#aba;
    /* cololr:#aabbaa */
}
<style>

 

3. rgb() 함수를 사용하여 입력

<style>
*{
    color:rgb(255, 0, 0);
    color:rgb(255, 255, 100);
}
<style>
  •  rgba() 함수를 사용해서 투명도까지 설정할수있다
<style>
*{
    color:rgba(255, 0, 0, 0);
    color:rgba(255, 255, 100, 1);
    color:rgba(255, 255, 100, 0.5);
}
<style>

★ 오늘의 포인트와 남겨두기 ★

 

※ 선택자, 결합자, display, position

※ 디자인 작업 프로그램 - figma

※ rem

※ 16진수

 

*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!

 

'Intro' 카테고리의 다른 글

CSS 2 ( flex/grid/animation-transform,transition,keyframe /media query )  (0) 2023.06.16
HTML - Element와 속성  (0) 2023.06.14
웹 브라우저와 HTML  (0) 2023.06.13
프로그래밍이란?  (0) 2023.06.12
'Intro' Related Articles more