스파르타_내일배움캠프/일지

[08주_2024_12_10] 웹퍼블리싱 2일차

ji_hye_0000 2024. 12. 10. 20:16

2024년 12월 10일 ( Tuesday )
───────────⚪──────
◄◄⠀▐▐⠀►► 𝟸:𝟷𝟾 / 𝟹:𝟻𝟼⠀───○ 🔊

[개인]
🩶 웹퍼블리싱 실시간 강의듣기
🩶 웹퍼블리싱 과제하기
🩶 TIL 작성 및 제출하기
[팀플]
🩶 저녁 팀 스크럼(회고)

 

🤤오늘 진행한 부분!

css(Cascading Style Sheets)

  • Cascading**: "차곡차곡 적용된다"는 뜻
  • Style Sheets**: 스타일을 적용하는 설계도라는 뜻
  • css는 웹 페이지를 꾸며주는 마법의 붓과 같음
  • html로 만든 뼈대에 색깔, 글꼴, 간격, 위치를 입힘
  • html은 제목과 문단을 만들고,css은 제목의 글자를 파란색으로 바꾸고 크기를 키움
  • 반응형 디자인도 css로 구현함.

css의 구조

selector{property:property value;}

  • 선택자(Selector)
    • 누굴 꾸밀지 선택하는 이름표
    • Ruleset의 맨 앞에 있는 부분
    • HTML에서 꾸밀 요소를 선택
    • ex.  `<p>` 요소를 꾸미려면 선택자로 `p`를 사용
  • 선언 (Declaration)
    • 무엇을 어떻게 꾸밀지 적는 규칙
    • Ruleset 안에 있는 한 줄의 꾸미기 명령
    • ex.  `color: red;`는 글자 색을 빨간색으로 바꾸는 규칙
  • 속성 (Property)
    • 무엇을 꾸밀지 결정하는 이름
    • 글자 색깔, 크기, 여백 같은 것을 꾸밀 때 속성을 사용
    • ex. `color`는 글자 색을 꾸미는 속성
  • 속성 값 (Value)
    • 어떻게 꾸밀지 정하는 값
    • 속성이 실행되는 방식을 정함
    • ex.  `color: red;`에서 `red`는 글자 색을 빨간색으로 설정하는 값

css 작성 규칙

  • 중괄호 { }로 감싸기 ➡️모든 선언을 중괄호에 적기
    • ex. p { color: blue;}
  • 속성과 값은 클론 : 으로 연결하기
    • color: red;
  • 선언이 끝나면 ;을 넣어야함
    • ex. p {color: red; font-size: 16px;}
  • 한번에 여러 요소를 꾸미고 싶을 때 선택자를 콤마(,)로 연결
    • ex. h1, p { color: red; }

선택자 종류

  • 요소 선택자
    • html 태그 이름을 선택
    • ex. p { color: blue;}
  • 클래스 선택자
    • 여러 요소를 한꺼번에 꾸밀 때 사용
    • ex. .highlight { color: orange; }➡️style에 작성 / <div class="highlight">하이라이트</div>➡️body에 작성
  • 아이디 선택
    • 특정 요소 하나를 꾸밀 때 사용
    • ex. #unique { color: red; } ➡️style에 작성 / <div id="unique">유니크</div> ➡️body에 작성

선택자 우선순위

    1. 인라인 스타일
    2. 아이디 선택자
    3. 클래스, 속성 선택자, 가상 클래스
    4. 태그 선택자, 가상 요소( (div, p, ::before)
    5. 전체 선택자(*)

가상 클래스

  • ' :hover ' : 마우스를 올렸을 때 작동
  • ' : active' : 버튼을 누르고 있는 동안 작동

css 적용 방법

  • 인라인 css: 태그 안에 직접 스타일을 작성
    • ex. <h1 style="color: blue;">파란색 제목</h1>
  • 내부 css: 태그를 사용해서 html 파일의 <head>태그 안에 스타일을 씀
  • 외부 css: 별도의 .css 파일을 만들어 연결
    • ndex.html과 같은 위치에 styles.css라는 파일을 생성
    • styles.css 파일에 스타일을 입력
    • index.html에 방금 만든 styles.css를 연결➜ <head>태그 안에 <link> 태그로 연결

레이아웃

  • padding : 내용과 테두리 사이의 간격
    • 단위(px, %, em 등)를 사용
    • padding:값; ➜모든 방향에 동일한 값을 적용
    • padding:위 아래 값 좌우 값; ➜위, 아래, 좌우에 서로 다른 값 적용
    • padding:위 값 오른쪽 값 아래 값 왼쪽 값; ➜네 방향을 각각 지정
  • border: 테두리
    • 스타일: solid(실선), dashed(점선), dotted(점), none 등 사용 가능
  • margin: 박스와 박스 사이의 간격
    • margin: 값; ➜모든 방향에 동일한 값을 적용
    • margin: 위 아래 값 좌우 값; ➜위와 아래, 좌우에 다른 값 적용
    • margin: 위 값 오른쪽 값 아래 값 왼쪽 값; ➜네 방향을 각각 지정
    • HTML과 CSS에서 두 요소의 상하 마진(위쪽과 아래쪽의 마진)이 서로 만나게 되면, 두 마진이 겹치지 않고 더 큰 값 하나만 적용➡️ 마진 상쇄(Margin Collapsing)
      • 마진 상쇄 방지법
        • 요소 사이에 다른 콘텐츠 추가
        • 플렉스 박스(flexbox)나 그리드(grid) 사용 ➜발생x
        • overflow 속성 설정 ➜부모 요소에 ' overflow: hidden; ' 또는' overflow: auto; ' 설정하면 자식 요소 간 마진 상쇄가 방지
        • display: inline-block;으로 변경하면 상쇄를 방지할 수 있음
    • width: 한 요소의 너비
      • 고정 값: 단위를 사용(px, em, %)
      • 자동 값: auto는 부모 요소의 크기를 기준으로 계산
    • background-color: 요소의 콘텐츠와 padding의 배경 색
      • 색상 이름
      • 16진수 색상 코드
      • RGB 또는 RGBA ➜ rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
    • color: 한 요소의 콘텐츠 색(일반적으로 글자색)
      • 색상 이름, 16진수, RGB, RGBA 사용 가능(배경색과 동일)
    • text-align: 텍스트 정렬 방식
      • left: 왼쪽 정렬(기본값)
      • right:오른쪽 정렬
      • center: 가운데 정렬
      • justify: 양쪽 정렬(양 끝을 맞춤)
    • relative:내가준 값 많큼이동
    • static:정적인거여서 그냥 그기본 값 유지

 

💭내일 계획

 🤍 데일리 회고

 🤍 강의듣기

 🤍 TIL 작성 및 제출하기

 🤍 저녁 회고