HTML, CSS

[CSS] FlexBox 란 무엇인가

웹에는 Layout 이라는 구성 요소가 존재한다. Layout 을 구성하는 가장 많이 쓰이는 요소인 Flex 와 Grid 가 가장 많이 사용되는데, 오늘 알아 볼것은 간단히 Flex라고 부르는 이 녀석은 사실 Flexible Box 의 줄임말로 유연한 느낌이 드는 이미지다. Flex 는 CSS3 에 나온 레이아웃 방식으로, 장점은 복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다.

[HTML] 시맨틱 마크업( Semantic Markup ) 이란 무엇인가

시맨틱 이란 의미론적인 이란 뜻 이고, 마크업이란 마크업 랭귀지로 표현하는 것을 의미한다. 즉 마크업의 의미를 잘 전달되게 작성하는 것을 의미한다. 시맨틱 마크업의 각 태그의 용도는 다음과 같다. 헤더와 푸터에 를 사용 메인 컨텐츠에 과 을 사용 독립 컨텐츠에 사용 최상위 제목으로 사용 순서가 없는 목록으로 과 사용 내비게이션은 사용 만약 누군가의 코드를 봤는데 헤더 콘텐츠에 id 값이 Footer 거나 Titles 등 시맨틱 하지 않은 코드를 작성한다면, 한눈에 이 코드를 파악하기 어려울 것이다. 그래서 시맨틱 마크업의 특징 중 하나는 다른 사람이 보기에 가독성이 높고, 다른 개발자가 코드를 작성하더라도 쉽게 의미가 파악되니까 유지, 보수에도 편리하다.

[CSS] CSS in JS 의 장단점

CSS in JS 는 스타일을 css 파일 대신 자바스크립트 파일로 하는 것으로, 대표적으로 Styled-Component 가 있다. CSS-in-JS의 장점 CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다 (모듈성) CSS-in-JS는 JavaSript 환경을 최대한 활용 할 수 있다 JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유 할 수 있다 현재 사용중인 스타일만 DOM에 포함한다. CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다 CSS-in-JS의 단점 러닝 커브 새로운 의존성 별도의 라이브러리를 설치해야 하므로 번들 크기가 커진다 인터랙션한 페이지일 경..

[CSS] display 속성에 대해

display 속성값의 종류 1. none display: none; 요소를 렌더링하지 않도록 설정합니다. visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않습니다. 2. block display: block; 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락입니다. 3. inline display: inline; block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해..

[CSS] Margin 과 Padding 의 차이점

Margin - Border 외부 크기 - Object 와 화면간의 여백 - 이 값을 조작하면 Object 가 주변 요소와 거리가 생긴다. Padding - Border 내부 크기 - Object 의 내부 여백 - 이 값을 조작하면 Object 의 내부 여백이 생겨 Border 가 뚱뚱해진다.

[CSS] Position 속성

Position 속성 Position 속성은 문서 안 요소들을 정하는 속성이다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다. static 아무 값도 넣지 않으면 되는 디폴트값으로, top, left, bottom, right 값을 전부 무시한다. relative 원래 있어야 하는 자리를 기준으로 위치를 지정한다. absolute relative 한 부모 요소를 찾아 위로 이동한다. 부모에 relative 가 없다면, 상단 위 0,0 기준으로 목표값이 정해지고 변경된다. Fixed 브라우저의 최상단에 고정. 마우스 스크롤을 따라 다니는 요소로, z-index 를 이용해 최상위 개체에 있는 것이 좋음. sticky 문서 요소 따라 배치되나, 가장 가까운 부모 el..

[CSS] SCSS 에 대하여

css : Cascading Style Sheets Sass : Syntactically Awesome Style Sheets SCSS : Sassy CSS Sass css 의 단점을 보완하기 위해 나온 확장 언어이자, 전처리기로 css 에 존재하지 않는 기능들을 가지고 css 를 다루는데 도움을 주는 툴이다. Sass 가 제공하는 기능은 다음과 같다 Variable(변수) : 자주 사용하는 색이나 폰트 등을 변수로 지정하여 재사용할 수 있음 Nesting(중첩) : 상위 선택자의 반복을 피해서 편리하고 복잡한 구조를 작성가능. Modularity(모듈화) : @use를 사용하여 파일을 분할하고 모듈화 할 수 있음 Mixins(믹스인) : 함수처럼 defalut parameter를 지정할 수 있고, pa..

[CSS] 반응형 웹사이트 란 무엇인가 ( Feat. 적응형 웹 사이트 )

반응형 웹 사이트 vs 적응형 웹 사이트 최근 10년간 모바일 유저는 계속 증가해서 현재는 모바일 시장이 PC 웹 시장의 2배 가까이 되는 규모까지 증가했다. 지금 우리가 사용하는 웹 사이트를 모바일에 크기까지 그대로 옮기면 사용하는 사람은 아무도 없을것이다. 그래서 모바일 유저들의 접근성을 늘리기 위해 사용하는 방법으로, 반응형 웹과 적응형 웹을 주로 사용한다. 이 두개를 간단하게 소개해볼까한다. 반응형 웹 사이트 반응형 웹 사이트는 웹 페이지의 디자인과 레이아웃이 전부 화면 크기에 자동으로 맞춰지는 웹을 의미한다. 하나의 템플릿이 크기가 늘었다 줄었다 하면서 적응되면서 다른 도메인으로 변경되지 않고 계속 같은 화면에서 진행되는 웹을 의미한다. 인스타그램이 가장 대표적인 예시라고 할 수 있다. 그렇다면..

[HTML/CSS] px, em, rem, vw, vh 에 대하여

용어 정리 px ( pixel ) : 픽셀 em ( element ) : 엘리멘트 rem ( root - element ) : 루트 엘리멘트 vw ( Viewport Width ) : 뷰포트 길이 vh ( Viewport Height ) : 뷰포트 높이 절대 길이 단위 px px 는 고정 값을 쓰는 절대 길이 단위이다. 특정 뷰가 늘어나건 줄어들건에 관계없이 지정한 사이즈를 계속 보여준다 참고로 96px 는 1 인치라고 한다. 상대 길이 단위 em, rem, vw, vh 는 상대 길이 단위이다. em, rem em 과 rem 은 폰트에 비례한 크기로 em은 element 의 폰트 사이즈, rem은 root 의 element 사이즈이다. em, rem 둘다 디폴트 값은 16px 이다. rem em 라고 했..