Web/HTML&CSS
-
SCSS를 정리하면서 CSS 코드를 보다보니 클래스 이름을 매우 번거롭게 _를 두개씩 써가면서 작성해놨길래 이상하다 싶어서 찾아봤는데 BEM이라는 방법론에 입각한 것이었다! 이번 포스트에서는 BEM 방법론에 대해서 살펴보자. CSS에도 바람이 많이 분다~ CSS 개발을 위한 방법론 몇년 전이지만 ITWORLD라는 곳에서 프로그래머가 가장 힘들어하는 일을 개발자 대상으로 조사한 적이 있다. 그 결과를 보면 실소를 금할 수 없지만 정말 공감이 간다. 무려 "이름짓기"다. CSS에서도 마찬가지이다. 요소들을 구분하기 위해 id와 class를 남발하다보면 어디에 무엇이 있었는지 알기 너무 힘들어진다. 다른 사람과의 작업 결과물을 합치다 보면 그냥 또다른 쓰레기를 새로 만드는게 훨씬 빠르겠다는 생각이 들고 어..
[BEM] BEM method0logySCSS를 정리하면서 CSS 코드를 보다보니 클래스 이름을 매우 번거롭게 _를 두개씩 써가면서 작성해놨길래 이상하다 싶어서 찾아봤는데 BEM이라는 방법론에 입각한 것이었다! 이번 포스트에서는 BEM 방법론에 대해서 살펴보자. CSS에도 바람이 많이 분다~ CSS 개발을 위한 방법론 몇년 전이지만 ITWORLD라는 곳에서 프로그래머가 가장 힘들어하는 일을 개발자 대상으로 조사한 적이 있다. 그 결과를 보면 실소를 금할 수 없지만 정말 공감이 간다. 무려 "이름짓기"다. CSS에서도 마찬가지이다. 요소들을 구분하기 위해 id와 class를 남발하다보면 어디에 무엇이 있었는지 알기 너무 힘들어진다. 다른 사람과의 작업 결과물을 합치다 보면 그냥 또다른 쓰레기를 새로 만드는게 훨씬 빠르겠다는 생각이 들고 어..
2022.09.22 -
이번 포스트에서는 보간법 즉 interpolation에 대해서 살펴보자. Interpolation #{ } Interpolation(보간법)은 문자열 중간에 특정 기호( #{변수} )로 표시해둔 부분을 문자열로 치환하는 기법을 말한다. 일반적으로는 값 보다는 속성을 동적으로 만들어야 할 때 사용된다. $name: my; $색: color; @warn "JS `과 비슷: #{$name}, #{$색}, #{2+4}"; @warn "JS `과 비슷: "+$name+", "+$색+", "+#{2+4}; #{$name}-div { border-#{$색}: blue; background-#{$색}: red; } my-div { border-color: blue; background-color: red; } @war..
[SCSS] 04. Interpolation이번 포스트에서는 보간법 즉 interpolation에 대해서 살펴보자. Interpolation #{ } Interpolation(보간법)은 문자열 중간에 특정 기호( #{변수} )로 표시해둔 부분을 문자열로 치환하는 기법을 말한다. 일반적으로는 값 보다는 속성을 동적으로 만들어야 할 때 사용된다. $name: my; $색: color; @warn "JS `과 비슷: #{$name}, #{$색}, #{2+4}"; @warn "JS `과 비슷: "+$name+", "+$색+", "+#{2+4}; #{$name}-div { border-#{$색}: blue; background-#{$색}: red; } my-div { border-color: blue; background-color: red; } @war..
2022.09.17 -
재사용의 출발점은 아마도 변수의 활용일 것이다. CSS에서는 동일하게 사용되어야 하는 값이 있을 때 변수를 적용할 수가 없었다. 따라서 변경이 필요할 때 모든 값을 일일이 변경해줘야 하는 번거로움이 있었다. 이번 포스트에서는 SCSS에서의 변수 활용에 대해서 살펴보자. 변수의 사용 $를 이용한 변수의 선언 및 사용 SCSS에서 변수의 선언은 $ 기호를 사용한다. 변수를 선언할 때는 위치에 따라 stylesheet의 root에 선언하는 전역 변수와 style 블록 내부에서 사용되는 지역 변수로 나뉠 수 있다. // 전역 변수 $base-color: blue; .variable { // 지역 변수 $sub-color: rgba($base-color, 0.5); @warn $base-color $sub-col..
[SCSS] 03. variable재사용의 출발점은 아마도 변수의 활용일 것이다. CSS에서는 동일하게 사용되어야 하는 값이 있을 때 변수를 적용할 수가 없었다. 따라서 변경이 필요할 때 모든 값을 일일이 변경해줘야 하는 번거로움이 있었다. 이번 포스트에서는 SCSS에서의 변수 활용에 대해서 살펴보자. 변수의 사용 $를 이용한 변수의 선언 및 사용 SCSS에서 변수의 선언은 $ 기호를 사용한다. 변수를 선언할 때는 위치에 따라 stylesheet의 root에 선언하는 전역 변수와 style 블록 내부에서 사용되는 지역 변수로 나뉠 수 있다. // 전역 변수 $base-color: blue; .variable { // 지역 변수 $sub-color: rgba($base-color, 0.5); @warn $base-color $sub-col..
2022.09.15 -
이번 포스트에서는 Scss에서 style을 작성하는 규칙인 Style Rule에 대해서 살펴보자. 기본 작성법 그냥 쓰려면 scss나 css나 동일 scss의 특별한 기능을 사용하지 않을꺼라면 scss나 css의 사용법은 동일하다. // scss .button { padding: 3px 10acpx; font-size: 12px; } // css .button { padding: 3px 10acpx; font-size: 12px; } 앞으로 코드를 비교할 때 왼쪽 블록은 scss, 오른쪽 블록은 css임을 밝혀둔다. 삶을 윤택하게 해주는 nesting scss의 진가는 선택자의 중첩 기능에서부터 발휘된다. 일반적인 css의 선택자는 재사용이나 계층적인 구조화가 어렵다. 예를 들어 nav ul, nav>l..
[SCSS] 02. Style Rules이번 포스트에서는 Scss에서 style을 작성하는 규칙인 Style Rule에 대해서 살펴보자. 기본 작성법 그냥 쓰려면 scss나 css나 동일 scss의 특별한 기능을 사용하지 않을꺼라면 scss나 css의 사용법은 동일하다. // scss .button { padding: 3px 10acpx; font-size: 12px; } // css .button { padding: 3px 10acpx; font-size: 12px; } 앞으로 코드를 비교할 때 왼쪽 블록은 scss, 오른쪽 블록은 css임을 밝혀둔다. 삶을 윤택하게 해주는 nesting scss의 진가는 선택자의 중첩 기능에서부터 발휘된다. 일반적인 css의 선택자는 재사용이나 계층적인 구조화가 어렵다. 예를 들어 nav ul, nav>l..
2022.09.13 -
이번 시리즈 포스트에서는 SCSS에 대해서 살펴보자. 답답한 CSS에서 깜짝 놀랄만한 SASS로!! 그리고 Scss까지. 개인적으로 frontend에서 backend까지 풀스택으로 웹을 다루는 개발자의 입장에서 가장 좀 답답하다고 생각되는 분야가 있다면 바로 CSS이다. 물론 부족한 미적 감각으로 인해 아무리 만지작 거려도 예뻐지지 않는다는 점도 일부 작용하겠지만 CSS는 쉬운 듯하면서 어려운 것 중 하나이다. 아니 어렵다기보다는 답답하다. (어려운 측면은 종류가 많아서 원하는 걸 찾기가 어려운 면이 있다.) CSS에는 일반적으로 프로그래밍에서 사용하는 그 흔한 변수나 함수등이 없다. 외부 CSS를 링크거는 등 모듈화 하려는 노력이 있으나 전체적으로 재사용하기가 어려우며 규모가 커질수록 유지보수성 역시 ..
[SCSS] 01. SCSS 개요이번 시리즈 포스트에서는 SCSS에 대해서 살펴보자. 답답한 CSS에서 깜짝 놀랄만한 SASS로!! 그리고 Scss까지. 개인적으로 frontend에서 backend까지 풀스택으로 웹을 다루는 개발자의 입장에서 가장 좀 답답하다고 생각되는 분야가 있다면 바로 CSS이다. 물론 부족한 미적 감각으로 인해 아무리 만지작 거려도 예뻐지지 않는다는 점도 일부 작용하겠지만 CSS는 쉬운 듯하면서 어려운 것 중 하나이다. 아니 어렵다기보다는 답답하다. (어려운 측면은 종류가 많아서 원하는 걸 찾기가 어려운 면이 있다.) CSS에는 일반적으로 프로그래밍에서 사용하는 그 흔한 변수나 함수등이 없다. 외부 CSS를 링크거는 등 모듈화 하려는 노력이 있으나 전체적으로 재사용하기가 어려우며 규모가 커질수록 유지보수성 역시 ..
2022.09.13 -
이번 포스트에서는 height 100% 속성과 100vh 라는 속성에 대해서 살펴보자. main content로 화면을 꽉 채우고 싶어요! 화면을 구성하면서 main content 영역으로 화면을 꽉 채우고 싶은 경우가 많다. 위 과정을 처리할 때 height와 min-height 속성을 사용하는데 %단위를 사용하는 경우와 vh를 사용하는 경우에 대해 살펴보자. 다음과 같은 간단한 html을 이용해서 확인해보자. 여기는 header 여기는 main 여기는 footer height: 100%는 요소의 부모의 높이를 100%로 채움 먼저 height는 요소를 감싸고 있는 부모의 높이를 100% 채운다는 이야기이다. .main { background-color: brown; /* 100%에서 header와 f..
[CSS]height 100% vs 100vh이번 포스트에서는 height 100% 속성과 100vh 라는 속성에 대해서 살펴보자. main content로 화면을 꽉 채우고 싶어요! 화면을 구성하면서 main content 영역으로 화면을 꽉 채우고 싶은 경우가 많다. 위 과정을 처리할 때 height와 min-height 속성을 사용하는데 %단위를 사용하는 경우와 vh를 사용하는 경우에 대해 살펴보자. 다음과 같은 간단한 html을 이용해서 확인해보자. 여기는 header 여기는 main 여기는 footer height: 100%는 요소의 부모의 높이를 100%로 채움 먼저 height는 요소를 감싸고 있는 부모의 높이를 100% 채운다는 이야기이다. .main { background-color: brown; /* 100%에서 header와 f..
2022.09.05 -
유연한 박스 모델(Flexible Box Model) HTML 태그들은 기본적으로 BOX 모델이 적용되며 세로로 적층하게 된다. 이를 가로로 배치하기 위해서 가장 널리 사용되는 방법이 float 속성을 이용해서 요소를 띄워주고 clear 속성으로 마무리하는게 일반적인데 부모 컨테이너의 생각과 달리 자식이 배치를 결정하기 때문에 억지스럽고 코드도 복잡해진다. CSS3에서는 flex라는 새로운 display 설정값이 나와서 가로 배치를 한결 손쉽게 처리할 수 있게 되었다. flex container적용하기 먼저 부모 요소에서 진행하느 설정에 대해 알아보자. flex는 display 속성의 값으로 상위 컨테이너가 자식을 어떻게 배치할 지 설정한다. 사용 가능한 값으로는 flex 또는 inline-flex가 있..
display:flex유연한 박스 모델(Flexible Box Model) HTML 태그들은 기본적으로 BOX 모델이 적용되며 세로로 적층하게 된다. 이를 가로로 배치하기 위해서 가장 널리 사용되는 방법이 float 속성을 이용해서 요소를 띄워주고 clear 속성으로 마무리하는게 일반적인데 부모 컨테이너의 생각과 달리 자식이 배치를 결정하기 때문에 억지스럽고 코드도 복잡해진다. CSS3에서는 flex라는 새로운 display 설정값이 나와서 가로 배치를 한결 손쉽게 처리할 수 있게 되었다. flex container적용하기 먼저 부모 요소에서 진행하느 설정에 대해 알아보자. flex는 display 속성의 값으로 상위 컨테이너가 자식을 어떻게 배치할 지 설정한다. 사용 가능한 값으로는 flex 또는 inline-flex가 있..
2020.09.10 -
일반적으로 화면을 구성할 때는 를 이용한다. block 타입 요소인 는 기본적으로 한 줄을 차지하며 세로 방향으로 쌓인다. box1 box2 box3 필요에 따라 요소를 가로 방향으로 배치하기 위해서는 float 속성을 사용한다. float을 사용하면 해당 요소를 붕~ 띄우게 되고 float 되지 않은 요소 위로 배치된다. 다음은 box1의 float 속성을 left로 처리한 결과이다. float된 요소인 box1이 떠오르면서 box2 위로 표시된다. box2를 다시 오른쪽으로 float 시키면 box3만 밑으로 들어가게 된다. #box1 { float: left; background: skyblue; width: 20%; } #box2 { float: right; background: lime; wid..
html 요소의 가로 배치일반적으로 화면을 구성할 때는 를 이용한다. block 타입 요소인 는 기본적으로 한 줄을 차지하며 세로 방향으로 쌓인다. box1 box2 box3 필요에 따라 요소를 가로 방향으로 배치하기 위해서는 float 속성을 사용한다. float을 사용하면 해당 요소를 붕~ 띄우게 되고 float 되지 않은 요소 위로 배치된다. 다음은 box1의 float 속성을 left로 처리한 결과이다. float된 요소인 box1이 떠오르면서 box2 위로 표시된다. box2를 다시 오른쪽으로 float 시키면 box3만 밑으로 들어가게 된다. #box1 { float: left; background: skyblue; width: 20%; } #box2 { float: right; background: lime; wid..
2019.08.29