예를들어 구글을 사용하는 사용자가 어떤 키워드를 입력하고 검색했을 때 구글 검색 엔진은 어떻게 필요한 정보들을 가져올까. 웹사이트의 토대가 되는 html의 Semantic Web, Semantic Tag에 대해 알아보자!검색엔진 = 빅데이터 = 권력SEO(검색엔진 최적

absolute가 되면 block-element도 내용의 크기만큼 너비를 갖게 된다. 부모인 div의 가로 크기를 input이 가져가고 img는 absolute로 부모 위에서 겹치게 한다. fixed는 부모가 필요없이 눈에 보이는 화면 내부에서만 움직인다. 주로 hea

span에는 오른쪽 정렬이 되도록 클래스를 부여하였는데도 오른쪽 정렬이 되지 않았습니다. span은 inline-element이기 때문에, span이 차지하는 영역은 "span의 오른쪽 정렬" 만큼의 길이밖에 안 되기 때문입니다.inline-element는 width,

만들던 자기소개 페이지를 엎고 다시 시작했다. 레퍼런스를 찾으면 찾을수록 나의 밑천이 드러나 무척 힘들다. 정말 감각적인 디자인이나 쿨한 레이아웃은 많은데 도저히 모르겠다... 일단 내가 할 수 있는 범위에서 열심히 해보리다. 새롭게 자기소개 페이지를 만들며 예전에

적당히를 모르는 text가 box를 넘어 존재하고 있다. 다른 box는 너무 겸손하다. 무척 혼내주고 싶다. grid-template-columns: max-content 100px 첫 번째 column이 필요한 content만큼 width가 늘어났다. 이제 min-c

1fr을 갖는 10개의 column이 4개의 row로 늘어선다. 압력을 가하면 이렇게 변한다. 변화를 막고 최소한의 품위를 유지하게 하고 싶다. 그러기 위해서는 minmax를 사용해야 한다. grid-template-columns: repeat(10, minmax(10

a

기본적인 4 x 4 grid가 있다. 이런 밍밍한 grid를 보면 난잡하게 만들고 싶은 충동에 사로잡힌다. parent에 넣어 child에게 적용하는justify-items를 배워야 할 시간이다.justify-items: stretch은 기본값이다. 기본적으로 자식을

grid-template-columns: repeat(4, 100px) 에서 100px을 1fr으로 바꿨다. fr 는 fraction이다. grid-template-columns: repeat(4, 100px) 일 때 body가 남는다. grid-template-col

다짜고짜 grid와 함께 시작하는 아침이다.

grid는 중요하다. 간편하게 레이아웃을 짤 수 있다. 이제 grid가 얼마나 훌륭한 개념인지 알아보자. 별 볼일 없는 4개의 블럭이 있다. 이 녀석들을 사이에 일정한 공간을 만들고 싶다. cssparent에 flex를 주고 wrap으로 묶고 space-between

2주간 펼쳐지는 노마드코더의 css challenge오늘 과제는 이 아름답고 훌륭한 페이지를 따라하는 것이다. 예전에 챌린지 했을 때 평균 6시간 걸려서 도중 포기했었는데 이번에는 어떨지 무척 궁금하다. html일단 body 위에 container를 만들고 그 안에 h

이제 left 와 right를 분할하면 된다. 이제 left 를 고정할 차례다.fixed에 top, left를 0을 주어 고정시키고 width로 공간을 마련했다. paddding으로 옮기는 게 좋은지, top, left를 이용하여 옮기는 게 좋은지 아직 모르겠다. 일

position을 조지려고 한다. css는 개월 수로 따지면 2개월은 한 거 같은데 제대로 정리를 안 해서 그런지 할 때마다 헷갈린다. 모든 태그는 기본적으로 position: static이다. 이제 태그를 옮기고 싶을 때 position: relative 를 사용하

왼쪽 파트는 display: fixed로 고정하고 오른쪽 파트는 스크롤할 수 있게 만든다. navigation bar가 최상단에 들어간다. htmlbody 는 header 와 main로 나눈다. logo와 navigation bar 그리고 toggle이 들어갈 head

csschild 에게 직접 입력했더니 2번째 box만 이동했다.여태까지 parent에 property를 주어 child를 움직였다. 하지만 align-self는 child에게 직접 property를 주어 개별적으로 배치한다. child에게 직접 property를 주기

flex 는 강하다. 그래서 children과 대화하지 않는다. flex로 box를 움직이고 싶다면 그들의 부모, 즉 flexbox container를 만들어야 한다. flexbox container를 통해 box들을 배치해야 하는 것이다.css과감하게 body 에 d

htmlcssbox를 3개 만들고 각 box에 height, width를 100px씩 준다. 이 귀여운 파란 box는 굉장한 margin 을 갖는다. 추측이지만 자신의 height 만큼 가로로 자리를 차지하는 것 같다. 이 상태는 기본 상태로 display: block

레이아웃 구상 - 깔끔하게레퍼런스 찾기 -http://www.besthorrorscenes.com

위코드를 앞두며