끈기의 힘 : 뉴비에서 풀스텍으로

자식 엘리먼트엔 어떤 것도 적지 않는다. 즉, 부모 엘리먼트에만 명시한다. 그 시작은 부모 엘리먼트에 display값으로 flex;를 주는 게 시작. 이제 자식들을 컨트롤할 수 있으니 간단한 속성 2가지를 살펴보자. 1) justify-content 이 속성의 디폴트 값은 flex-start 이러한 속성들은 모든 계산을 알아서 해주기에, 화면 크기를 작게 하거나 크게 하건 그에 맞춰 엘리먼트들이 움직인다. 다시 말해, 자식 엘리먼트는 건들지 않으면서 얘들을 움직이고 있다는 것이 핵심. 여기서 주의할 점은 justify-content를 적용하면 눈에 보이는 이미지는 '수평'으로 작동한다고 생각할 수도 있으나, 착각이다. 뭔 소리여? 구글에 'CSS flexbox main axis cross axis' 검색..

오늘의 수업은 float란 속성을 중심으로 다음 그림과 같은 레이아웃을 만들어보자! 다만 한계점이 있는데, 크기를 좌우로 늘리든 이 레이아웃의 크기는 변동이 없다. 물론 한계를 해결할 순 있지만 자바스크립트 등의 언어가 필요해지게 되니까 지금은 의미없다. 즉, 화면이 고정된 상태의 성배 레이아웃을 만들어보자. CSS position float flex float Lorem ipsum ~~ ad copyleft 이렇게 만들면 그 값은 다음과 같다. 이제 여기서 css에 속성을 넣어보자. header{ border-bottom: 1px solid gray; } 하고 nav, article, aside가 수직인데 수평으로 만들어줘야 하니까 이때 flex를 쓰지 않고 이 수업은 float니까 바로 float효과..

CSS에서 float란 속성은 본문 안에서 이미지를 삽입할 때, 좀 더 자연스럽게 삽입할 때 사용하는 기법. 많이 사용되는 곳은 삽화 삽입뿐 아니라, 레이아웃을 잡을 때도 많이 사용됨!! 전에 배운 flex란 기능이 최근엔 레이아웃을 잡는 것의 주가 되었지만, 기존에 floating이라는 기능을 통해 레이아웃을 잡는 형태가 있었기에 굳이 flex가 아니더라도 float로 레이아웃을 잡을 수 있기에 알아만두자는 것이다! 일단 다음과 같이 아무런 사진과 아무런 내용을 넣어보자 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ★ VS CO..

주로 신문과 같이 화면의 크기가 큰 매체에서 사용하는 전통적인 레이아웃 기법. column 즉, 열을 조각조각 나눠서 좀더 읽기 편하게 만드는 기법. 그 다음 바로 밑에 class 속성값이 column인 div 태그를 하나 생성. 이 div 태그 안에 lorem1000을 추가. (lorem1000을 쓰고 탭키를 누르면 아무 단어 1000개가 생성된다!) 그다음 CSS영역에 다음과 같이 추가하면! .column{ column-count:2; } (화면을 늘리건 줄이건 2개로 소분된 화면은 유지.) 결과는 그 많은 텍스트가 2개로 소분된다. 아래처럼. 근데 약간 텍스트가 들쭉날쭉한 거 같아서 나란히 보이게끔 하고 싶으면 저번에 배웠듯, text-align:justify; 값을 주면 되겠지! (justify값..

섹션5. 미디어쿼리(Media query) - 1 : 기본 : 미디어는 먼저, 가전제품 중 TV나 핸드폰, 프린터, 데스크탑과 같이 어떤 정보를 매개해주는 매체들이라 할 수 있다. 쿼리는 미디어의 상태를 미디어에게 물어봐서 그 상태에 따라 우리가 다른 디자인을 할 수 있도록 한다. 라는 느낌. ‘반응형 디자인’의 핵심 기능이 바로 미디어 쿼리! 이제 코드를 만들어보자. 500px이하까지는 백그라운드 컬러를 red로 하고, 501~600px까지는 green으로 하겠다! ★ 근데 만약에!! 위에서 green값을 매긴 미디어쿼리를 red값을 매긴 미디어쿼리 아래로 위치가 반대로 위치되면, 500px이하로 떨어져도 바탕화면은 green 값으로 나오게 된다. 이건 예전에 배운 ‘캐스케이딩’과 관련이 있다!! ( ..

5-4. flex : holy grail(성배) layout // 얘들은 화면 전체를 사용. 화면의 크기가 작아질수록 main의 크기만 작아지는 형태. 오늘의 목표 : holy grail layout 만들어보기! 일단 다음과 같이 코드를 짜보자. 생활코딩 html css javascript 생활코딩은 일반인을 위한 코딩 수업입니다. AD 홈페이지 일단 보기 편하게 container 밑에 header, section, footer를 줄여서 보자. 우린 이제 이 3가지 태그를 어떻게 하고 싶나? 수평으로 나란히 보여주고 싶어! 얘네 3 아이템들의 부모의 역할을 하는 컨테이너 즉, 바깥에 있는 컨테이너라는 클래스 값을 갖는 녀석에게 display값을 flex;로 줘야한다! 이게 시작! 일단, 우리가 flex를..