HTML,CSS 기본 정리

👀·2024년 7월 25일
CSShtml
0

px,em,rem의 차이

  1. px
  • 절대적인 길이 단위로 화면에서의 실제 픽셀 크기
  • 화면 해상도에 따라 픽셀 크기가 다르기 때문에 일관된 크기를 보장하지 못한다.
  1. em
  • 상대적인 길이 단위, 현재 요소의 글꼴 크기를 기준.
  • 여소가 속한 컨택스트에 따라 크기가 달라지며, 부모 요소의 글꼴 크기에 따라 크기가 바뀐다.
    요소가 중첩될수록 계산이 복잡해진다.
  1. rem
  • 상대적인 길이 단위, 루트 요소(html)의 글꼴 크기를 기준.
  • 전체 문서에 일관된 크기를 보장한다.

예시 

/* 기본 글꼴 크기 */
html {
  font-size: 16px;
}

/* 작은 화면 (모바일) */
@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
}

/* 중간 화면 (태블릿) */
@media (min-width: 601px) and (max-width: 1024px) {
  html {
    font-size: 15px;
  }
}

/* 큰 화면 (데스크탑) */
@media (min-width: 1025px) {
  html {
    font-size: 16px;
  }
}

vw와 vh의 차이

  1. vw (viewport width)
  • 뷰포트의 너비를 기준으로 한 상대적인 길이 단위.
    1vw = 뷰포트 너비의 1%.
  1. vh (viewport height)
  • 뷰포트의 높이를 기준으로 한 상대적인 길이 단위.
    1vh = 뷰포트 높이의 1%

장점
1. 화면 크기가 변해도 요소들이 뷰포트를 기준으로 크기를 조정하기 때문에 일관된 레이아웃을 유지할 수 있다.
2. 전체화면을 차지하는 요소를 쉽게 설정할 수 있다. (로딩 컴포넌트)
3. 고정된 픽셀이 아닌 비율을 사용하여 레이아웃을 설정할 수 있다.

** vw, vh는 스크롤바의 크기를 포함하기 때문에 이를 고려해야 한다.

브레이크 포인트

  1. 모바일
  • 최소 320px, 최대 600px
  • 대부분의 모바일 화면 크기 커버
  1. 타블렛
  • 601px ~ 1000px
  • 타블렛 + 대형 스마트폰 커버
  1. PC
  • 최소 1001px ~
  • 대형 타블렛 + PC

디자인 레이아웃에 따라 달라진다.
개인적으로는 3개로 나눠서 작업.

css 우선순위

  1. 인라인 스타일 (Inline Styles)
  • HTML 요소에 직접 style 속성 입력
  • 예시
<div style="width: 100px; height:100px; border:2px red solid;" />
  1. ID 선택자 (ID Selectors)
  • HTML 요소에 id 속성
  • #선택자
<html>
	<div id="example" />
</html>
  
<style lang="css">
  #example{
	width:100px;
    height:100px;
    border:2px red solid;
}
  </style>
  1. 클래스, 속성, 가상 클래스 선택자 (Class, Attribute, Pseudo-Class Selectors)
  • 클래스: .선택자
<html>
	<div class="example" />
</html>
  
<style lang="css">
  .example{
	width:100px;
    height:100px;
    border:2px red solid;
}
  </style>
  • 대괄호 안에 오는 속성 선택자 []
input[type="text"]{
	color: red;
}
  • 콜론으로 시작하는 가상 클래스 선택자
.example:hover{
	width:200px;
    transition: all 1s;
}
  1. 태그, 가상 요소 선택자(Tag, Pseudo-Element Selectors)
  • HTML 태그 이름
div{
	color: red;
}

-가상 요소 선택자

.example:before{
	content:'';
    display: block;
    width:100px;
    height:100px;
    background: red;
}
  1. 전체 선택자와 연결자 (Universal Selector, Combunators)
  • (전체) * 선택자
* {
	color: #000;
}
  • 후손 선택자 (공백), 자식 선택자 (>), 형제 선택자(+,~) 등
// 후손 선택자 => ul 요소의 모든 li 적용
ul li {
	color: #000;
}
// 자식 선택자 => ul요소의 첫번째 li만 적용
ul > li {
	color: #fff;
}
<html>
  <div />  // color: #fff 적용됨
  <p>a</p> // color: #fff 적용됨
  <p>b</p> // color: #bcbcbc 적용됨 
  <p>c</p> // color: #bcbcbc 적용됨 
</html>

<style>
  // 인접 형제 선택자 => div, div 요소 이후 첫 p 태그만 적용
  div + p {
  	color: #fff;
  }
  // 형제 선택자 => div, div 요소 이후 모든 p 태그만 적용
  div ~ p {
  color: #bcbcbc;
  }
</style>

!important
모든 우선순위 규칙을 무시하고 최우선으로 적용된다.

Cascading

  1. 중요도
  • !important : 다른 규칙보다 우선순위가 제일 높다.
  1. 명시도
  • 인라인 스타일 > ID 선택자 > Class, 속성, 가상 클래스 선택자 > 태그, 가상 요소 선택자
  1. 선언 순서
  • 나중에 선언된 규칙이 적용된다.

SCSS

  1. 변수
  • 스타일 시트에서 자주 사용되는 값을 변수로 저장하여 재사용한다.
$primary-color: #3498db;

body{
	color: #primary-color;
}

2.중첩

  • 선택자를 중첩하여 구조적인 스타일 시트를 작성할 수 있다.
<html>
  <div>
    <ul>    
      <li></li>
      <li></li>
    </ul>
  </div>
</html>

<style lang="scss">
  div {
    ul {
      li {
      	color: red;
      }
    }
  }
</style>
  1. 모듈화
  • 파일명 앞에 _를 붙여 파일로 만든다.
// _variables.scss
$primary-color: #3498db;

// main.scss
@import 'variables';

body {
  color: $primary-color;
}
  1. 믹스인
  • 반복되는 스타일 블록을 믹스인으로 정의하고 호출할 수 있다.
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}
  1. 상속
  • 공통 스타일을 다른 선택자에 적용할 수 있다.
.button {
  padding: 10px 20px;
  border: none;
  background-color: #3498db;
}

.primary-button {
  @extend .button;
  color: white;
}
  1. 연산
.container {
  width: 100% - 20px;
}

.box {
  width: (100% / 3) - 10px;
}

position

  1. static
  • 기본값
  1. relative
  • 상대적으로 이동
  1. absolute
  • 조상 요소 중 relative, absolute, fixed 또는 sticky가 적용된 조상 요소를 기준으로 배치
  1. fixed
  • 뷰포트 기준 배치, 스크롤해도 위치 고정
  1. static
  • 뷰포트가 지정된 위치에 도달하면 fixed, 도달하지 않았을 때는 relative로 배치

HTML렌더링 중 Javascript가 실행 되면 멈추는 이유

브라우저 렌더링 프로세스
1. HTML 파싱 : 브라우저는 HTML문서를 파싱하며 DOM(Document Object Model)트리 생성
2. CSS 파싱: CSS파일 로드하고 파싱하며 CSSOM (CSS Object Model)트리 생성
3. Dom + CSSOM 합성: DOM과 CSSOM을 결합하여 렌더 트리 생성
4. 페인트: 요소들을 화면에 그린다.

Javascript 렌더링
1. HTML파싱 중 스크립트 태그 발견

  • 브라우저는 javascript 실행 후 DOM이 변경될 수 있기 때문에 스크립트 태그를 만나면 HTML파싱 중지, 스크립트 다운로드한다.
  1. Javascript 동기적 실행
  • Javascript는 기본적으로 동기적 실행, 하나의 스크립트가 완료되고 다음 스크립트를 다운받거나 HTML 파싱을 이어간다.
  • Javascript가 DOM을 조작하고 스타일 변경할 수 있기 때문.

Javascript가 DOM을 조작할 수 있기 때문에 브라우저가 Javascript 실행 후 DOM의 최신 상태를 유지하기 위함.

profile
👀
이전 포스트

nodemailer

다음 포스트

웹 역사

0개의 댓글