JDevBlog

BEM 방법론이란? 문제의 요소에 대한 속성에 근거하는 클래스의 이름을 짓는 구조적인 방법을 제시합니다. 예를 들어, header__form--email(차례대로 Block-Element-Modifier)과 같이 클래스명이 표현되는 것인데, 이 방법이 BEM을 활용한 것입니다. 단, BEM 방법론은 ID에는 사용할 수 없고, 오직 클래스명에만 활용할 수 있습니다. 이러한 클래스명은 BEM방식의 이름을 여러번 반복하여 재사용할 수 있도록 허락하며, HTML과 CSS/Sass 파일에서도 더 일관된 코딩 구조를 만들 수 있게 도와줍니다. Block(전체를 감싸고 있는 블럭요소) 블럭(block)은 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 말합니다. 일종의 코딩덩어리. 아래와 같이 헤더, 풋터..

Achievement Goals 만드려는 앱을 와이어프레임으로 그려볼 수 있다. 와이어프레임만 보고 HTML로 코딩할 수 있다. div (또는 section, header 등의 시맨틱 태그)로 영역을 구분하는 이유를 이해할 수 있다. HTML에서 어느 때에 id, 어느 때에 class를 사용해야 하는지 이해할 수 있다. 와이어프레임 와이어프레임(wireframe)은 골격 단순한 도형만을 사용하여 제품의 인터페이스를 시각적으로 묘사 레이아웃과 제품의 구조를 보여주는 용도 목업 실제 작동되는 모습처럼 HTML 코드를 작성. 하드코딩하는 것을 말한다. 혼동되는 용어를 정리해보자. 이곳에서 시각적인 차이를 느껴보자. https://brunch.co.kr/@cysstory/103

CSS 란? CSS는 쉽게 말해 **사용자 경험(UX)**을 위한 디자인이다. 적당한 위치에 콘텐츠 배치 (레이아웃) 텍스트 강조와 같은 최소한의 타이포그래피(조판, typography) 최소한의 접근성 (예를 들어 색상) UX 의 중요성. 리디자인(왼쪽부터) 예시 UI: 적당한 위치에 콘텐츠 배치 (레이아웃). 훌륭한 내부 기능을 갖고 있더라도 UI가 없으면 소용이 없습니다. 잠깐, 프론트엔드 개발자 소양이란...? 화면 구성을 할 줄 아는 능력 (레이아웃) 보기 좋은 화면을 만들 줄 아는 능력 (타이포그래피, 색상) 정렬이 어긋나거나 배색이 좋지 않음을 인지할 수 있는 감각 사용자가 사용하기 편한 앱이 무엇인지, 왜 편하게 느끼는지에 대한 이유를 분석해본 경험 원문: medium.com/actuali..

Before you learn, CSS의 기본적인 셀렉터 #와 .을 이해하고 있다.→ id, class 어떤 단위가 절대 단위인지, 상대 단위인지 알고 있다. → px 절대, em,rem 상대 CSS 박스 모델에 대해 이해하고 있다. → position, margin, border, padding, content 박스 측정 기준 두가지의 차이를 이해하고 있다.(box-sizing) content-box: 컨텐츠 기준으로 height, width 측정. border-box: border, padding, 컨텐츠 모두 포함하여 height, width 값 측정. Achievement Goals 다양한 CSS 셀렉터 규칙을 이해할 수 있다. 레이아웃을 위한 HTML을 만들 수 있다. Flexbox를 이용해 레..