웹디자인 3

HTML 반응형 웹디자인: inline-block 대신 flex를 사용하자.

html 요소는 다음과 같은 css 코드를 통해 인라인 (inline)과 블록(block) 요소의 성질을 모두 갖게 설정할 수 있다. display: inline-block; 이렇게 지정된 인라인블록은 기존의 인라인처럼 다른 것들과 수평적으로 나란히 배치할 수 있다. 또 블록처럼 너비와 관련된 속성값을 설정할 수도 있다.(margin, height, width) block: 수평선을 혼자 차지하는 HTML태그 ex) , , ... , .. 등 inline: 수평선에 다른 요소가 같이 위치할 수 있는 HTML 태그 ex) , , , .. 등 블록을 인라인블록으로 바꿔보자 div 태그는 같은 수평선 안에 다른 html 요소가 올 수 없는 대표적인 block 태그이다. html코드 .baby { margin:..

BEM: CSS를 위한 HTML 클래스 명명규칙

많은 프로그래밍 언어들이 snake_case, camelCase, PasckalCase 등 저마다의 명명규칙을 가지고 있는 것처럼 HTML 에도 명명규칙이 있다. 왜? html 태그도 id와 class를 통해 관리하니까 쉽고 직관적인 네이밍이 중요하기 때문이다. 가장 대중적인 html 클래스 명명법, BEM에 대해 알아보자. BEM: Block Element Modifier BEM, 뱀은 블록 엘리멘트 모디파이어의 축약어로 HTML 요소들을 block과 그에 포함된 element로 구분하고 거기에 적용시킬 개별적 디자인 특성을 modifier로 구분해서 클래스명을 지어주는 규칙이다. BEM 표기법을 사용하는 유저들은 html의 id속성은 사용하지 않는다. 오로지 class만을 사용한다. 왜? select..

부트스트랩의 Grid(그리드) 레이아웃, +@container(컨테이너), breakpoint(브레이크포인트)

Grid(그리드)? 평행선과 수평선으로 이루어진 격자구조의 요소. 일반적으로 row(행): 가로줄과 column(열): 세로줄로 구성된다. 구글 크롬 시작화면의 웹페이지 아이콘 링크들도 일종의 그리드 배치로 볼 수 있다. ( HTML 소스는 안 까봐서 저게 실질적인 어떤 라이브러리의 그리드 구조인지는 모른다.) 부트스트랩에서는 responsive(반응성이 있는) 그리드를 제공해 준다. 이 말은 웹페이지 방문자가 사용 중인 기기의 화면크기, 혹은 브라우저의 크기에 반응하여 요소들의 배치가 자동으로 번경됨을 뜻한다. 크롬을 통해 예시를 살펴보자 크롬브라우저의 가로길이를 늘리자, 한 행에 배치되어 있는 아이콘의 개수가 3개에서 5개로 늘었다. 부트스트랩이 반응하는 화면 사이즈 표 출처 : 부트스트랩 그리드 d..