학습 요약 - HTML/CSS 정리

Jiyeon·2023년 3월 14일
0
post-thumbnail

⌨️Visual Studio Code(VS Code) 자동완성 및 단축키

학습 요약을 하기 전, 비주얼스튜디오코드를 사용할 때 유용한 단축키를 정리해보려고 한다.
직접 작성할 때보다 작업 속도가 훨씬 빨라진다 ㅎㅎ

1) 태그 작성할 때 유용한 자동완성

  • class명이 title인 p 태그: p.title (+tab 또는 enter)
<p class="title"></p>
  • p.title{내용입력}
<p class="title">내용입력</p>
  • id명이 wrap인 div 태그: div#wrap
    참고) div 태그는 태그명을 작성하지 않고 '.class명', '#id명'만 작성해도 div 태그로 생성된다.
<div class="wrap"></div>
  • class 명이 title인 p태그를 5개 생성
p.title*5
  • 응용: ul 태그 안에 li 5개 생성하기
ul>li*5

++ font 관련 자동완성

  • fz16 -> font-size: 16px;
  • fw700 -> font-weight: 700;

2) 수정할 때 유용한 단축키

  • 여는 태그와 닫는 태그를 동시에 수정하는 단축키 (작성한 태그를 다른 태그로 바꿀 때)
    : 태그 선택(더블클릭 or 드래그) 후 ctrl+d
    ⭐확장자(extension): Auto Rename Tag 설치 시 자동으로 적용된다. 강추!!

  • 전체 내용에서 선택한 영역과 똑같은 부분을 한번에 수정하는 단축키
    : 수정하는 부분 선택 후, crtl+shift+l
    : crtl+f 후 단어 입력한 뒤 > 표시 눌러서 아래 칸에 수정하기
    ex) class명을 변경하거나 폴더명을 변경한 뒤 경로를 한번에 수정할 때 유용하다.

  • 여러 줄에 한번에 입력하는 단축키
    : alt+각 줄에서 입력할 곳 클릭.
    crtl+alt+아래 방향키 원하는 줄만큼(커서 위치가 같을 때)

++ 그 외

  • 줄 전체 복붙 단축키
    : 복사하는 줄에서 alt+shift+아래 방향키를 누르면 줄 전체가 아래로 붙여넣기 된다. (그냥 ctrl+c하고 다음 칸에 ctrl+v해도 됨ㅎㅎ)

1. style 속성 적용 우선순위

inline 속성 > id > class > 태그이름

한 태그에 서로 다른 스타일을 중복되게 적용했을 때, 위에 작성한 순으로 style이 우선적으로 적용된다.

ex)

<p id="title" class="txt" style="color: red;">하이</p>
<style>
#title{
  color: blue;
}
.txt{
  color: green;
}
p{
  color: yellow;
}
</style>

이 경우, 인라인 속성으로 작성된 red컬러가 적용된다.
우선순위: red > blue > green > yellow


2. px, em, rem

font 크기를 설정하는 단위로 주로 px, em, rem가 사용된다.
일반적으로 16px=1em=1rem

px: 고정된 픽셀값
em: 부모 요소의 font-size를 1em으로 계산한다.
rem: html의 font-size를 1rem으로 계산한다.

사용자가 브라우저 설정에서 폰트 크기를 변경할 수 있는데, 이는 폰트 크기의 단위가 rem일 때만 적용된다.(사용자가 폰트 크기를 변경할 수 있도록 하려면 rem 사용 권장)


3. grid 사용법

위와 같은 레이아웃을 grid로 만들 경우, 다음과 같이 html을 작성하고

<div class="container">
   <div class="top"></div>
   <div class="left"></div>
   <div class="right"></div>
   <div class="bottom"></div>
</div>

부모 요소의 css style 속성에 다음과 같이 display: grid를 적용한다.

<style>
.container{
  width: 400px;
  height: 600px;
  border: 1px solid black;
  font-size: 0;
  
  /* 그리드 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
  "top top"
  "left right"
  "bottom bottom";
}
</style>
  • columns가 1fr 1fr인 경우, 전체 공간을 1:1비율로 나누어 50%씩 두 칸이 만들어진다.
  • 3fr 1fr인 경우, 3:1 비율로 나눠진다.
  • 3fr 100px 1fr로 할 경우, 100px는 고정되고 100px를 제외한 나머지 영역이 3:1로 나눠진다.

grid-areas는 grid colums와 rows의 개수에 맞게 지정해주어야 한다.

자식 요소에 다음과 같이 style을 주면 위와 같은 레이아웃이 완성된다.

<style>
.top{
  background-color: red;
  grid-area: top;
}
.left{
  background: blue;
  grid-area: left;
}
.right{
  background: green;
  grid-area: right;
}
.bottom{
  background: purple;
  grid-area: bottom;
}
</style>

자식요소에 width와 height 값을 지정할 수 있지만, 지정하지 않거나 auto로 설정하면 자동으로 레이아웃에 맞게 적용된다. (width, height값 지정하지 않는 것 권장)

++ grid-gap: 10px와 같이 그리드 간에 간격을 설정할 수 있다.


form 태그까지 작성하려다가 내용이 길어질 것 같아서 따로 포스팅 할 계획!
(아니면 나중에 추가할 수도 ㅎㅎ..)

profile
프론트엔드 개발 공부 기록짱 ദ്ദിᐢ. .ᐢ₎

2개의 댓글

comment-user-thumbnail
2023년 3월 14일

복습 짱짱맨이여융 젼쓰!~!

1개의 답글