프론트엔드/CSS

CSS

반신욕좋아하는J 2022. 4. 25. 17:20
반응형

학습방법

큰 시간을 들이지 않고 빠르게 훑으며 명확하게 알아야하는 부분을 정리해가며 공부하려한다.

HTML 에 CSS 적용하기

link 태그를 통해서 css 를 적용할수있다.

<link rel="stylesheet" href="style.css">

CSS의 셀렉터

CSS 를 적용시키기위해 다양한 방법이있다.

  • *
  • 태그
  • id
  • 클래스
  • 어트리뷰트
  • 복합
  • 가상 클래스 :
  • 가상 요소 ::

Box 의 구성

콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)로 구성된다.

  • 콘텐트(Content) - 실제 내용
  • 패딩(Padding) - border 안쪽의 내부 여백의 영역
  • 테두리(Border) - 테두리 영역
  • 마진(Margin) - 테두리 밖 외부 여백의 영역

display 의 프로퍼티 들

layout 정의에 자주 사용되는 중요한 프로퍼티 들이다 .

  • block
  • inline
  • inline-block
  • none

block 의 특성

  • 항상 새로운 라인에서 시작한다.
  • 화면 크기 전체의 가로폭을 차지한다. ( width: 100%)
  • block 요소내에 inline 요소를 포함할수있다.
  • width, height, margin, padding 프로퍼티 지정이 가능하다.

대표적으로 div , h1~h6 , p , ol , ul , li , hr , table, form 등이 있다.

inline 의 특성

  • 줄을 바꾸지않고 다른요소와 함께 한 행에 위치한다.
  • content의 너비만큼 가로를 차지한다.
  • width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. 상, 하 여백은 line-height로 지정한다.
  • inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다. inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.

대표적으로 span, a, strong , img , br , input , select , textarea, button 등이 있다.

inline-block 의 특성

inline 레벨 요소와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티를 모두 지정할 수 있다.

position

요소의 위치를 정의하는 프로퍼티 이다

static

기본 디폴트 값으로 부모요소의 위치 기준으로 배치된다

relative ( 상대 위치 )

기본위치를 기준으로 좌표를 사용해서 위치를 이동시킨다.

absolute ( 절대 위치 )

static을 제외한 가장가까이있는 조상 요소를 기준으로 좌표 만큼 이동한다.

부모요소가 static 일경우 document body 기준으로 잡는다

따라서 부모요소 기준으로 하려면 부모요소 position 을 relative 로 정의해야한다.

absolute 선언 시, block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

relative 프로퍼티와 absolute 프로퍼티의 차이점은

relative 프로퍼티는 기본 위치(static으로 지정되었을 때의 위치)를 기준으로 좌표 프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킨다. 따라서 무조건 부모를 기준으로 위치하게 된다.

absolute 프로퍼티는 부모에 static 이외의 position 프로퍼티가 지정되어 있을 경우에만 부모를 기준으로 위치하게 된다. 만일 부모, 조상이 모두 static 프로퍼티인 경우, document body를 기준으로 위치하게 된다.

따라서 absolute 프로퍼티 요소는 부모 요소의 영역을 벗어나 자유롭게 어디든지 위치할 수 있다

fixed ( 고정 위치 )

브라우저의 viewport 기준으로 좌표를 사용해 위치이동된다.

스크롤이 되더라도 화면에서 사라지지않고 같은 곳에 위치하며

fixed 프로퍼티 선언 시, block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.

정렬

float

요소를 다음요소 위에 떠있게 하는데 기본레이아웃 흐름에 벗어나 요소의 모서리가 페이지 왼쪽이나 오른쪽으로 이동하는 프로퍼티이다.

float 프로퍼티가 선언된 요소와 float 프로퍼티가 선언되지 않은 요소간 margin이 사라지는 문제

해결하기위해 float 프로퍼티를 선언하지않은 요소에 overflow: hidden 을 선언하여 자식요소가 부모요소의 영역보다 클경우 넘치는 부분을 안보이게 해주는 역할을 해 문제 해결을한다.

Reset CSS

웹 브라우저 마다 디폴트 값으로 스타일이 적용되기 때문에 모든 브라우저에서 동일한 CSS 값을 보여주기위해서 디폴트 값을 초기화 해주는 작업이 필요하다.

구글에 Reset CSS 라 치고 초기화 코드를 찾아서 import 해주면 된다 .

반응형 웹사이트

viewport meta 태그

웹페이지의 가시영역을 의미하는데 디바이스에따라 차이가 있다.

일반적으로는 모바일 디바이스에만 적용을한다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 일반적인 설정 -->
<!-- 가로폭을 디바이스 에 맞추고 초기화면 배율을 100퍼센트로 설정하는것을 의미한다 -->

CSS 적용 우선 순위에 따라 Moblie-first 방식이라면 해상도가 작은순서부터 , Non Moblie-first 방식이라면 해상도가 큰 순서로 기술한다.

flexbox

모던 웹 을 위해 제안된 기존 레이아웃보다 더 세련된 방식의 니즈를 부합하기위한 새로운 레이아웃방식이다.

사용법

flex item 의 자식요소 와 flex-container 부모 요소로 구성되고

부모요소의 display 속성에 flex 를 지정한다

다만 부모요소가 inline 요소일 경우 inline-flex 를 지정한다.

수평정렬

  1. inline/inline-block 요소 
     .container {
   text-align: center;
 }
  2. 정렬대상의 부모요소에 text-align : center 를 지정한다.
  3. block요소 
     .item {
   width: 200px;
   margin: 20px auto;
 }
  4. 정렬 대상 요소에 너비를 지정하고 margin -left 와 margin-rigth 에 auto를 지정한다
  5. 복수의 block 요소정렬대상에 width 를 지정하지않으면 콘텐츠 너비에 맞춰 결정되기때문에 명시적으로 지정한다.
  6. .container { text-align: center; } .item { width: 150px; display: inline-block; }
  7. 기본적으로 수직 정렬이 된다 . 이것을 수평 정렬 하려면 정렬대상 요소에 inline-block 요소를 준뒤 부모요소에 text-align : center 지정한다.
  8. flexbox 
     .flex-center {
   display: flex;
   justify-content: center;
 }
  9. 부모요소에 아래 코드를 지정한다.

수직정렬

inline/inline-block 요소

한줄인 경우 padding top 과 bottom 을 동일하게 주거나 height 와 line-height를 동일하게 주면된다.

.container {
  padding: 50px;
}

.container {
  height: 100px;
  line-height: 100px;
}

여러줄인 경우 - padding top 과 bottom 동일하게 주거나 vertical-align 프로퍼티를 사용하는방법도있다.

좀더 간단하게 flexbox 를 사용하서 할수도있다.

// padding
.parent {
  display: table;
  height: 100px;
}
// vertical-align
.child {
  display: table-cell;
  vertical-align: middle;
}
// flexbox
.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

block 요소

요소 높이가 고정되있을경우 - 부모요소 기준으로 절대 위치를 지정한다.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  /*요소의 높이(100px)의 반 만큼 위로 이동*/
  margin-top: -50px;
}

요소 높이가 불확정 상태인 경우 - 부모 요소를 기준으로 절대 위치를 지정한다.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  /*요소의 높이의 반(50%) 만큼 위로 이동*/
  transform: translateY(-50%);
}

flexbox - flexbox layout 을 지정한다

.parent {
  display: flex;
  /*위에서 아래로 수직 배치*/
  flex-direction: column;
  /*중앙정렬*/
  justify-content: center;
}

수평/수직 정렬

flexbox 를 사용하는 방법 - 부모요소에 적용

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
반응형
저작자표시 (새창열림)