leesche blog

강의 플렉스(flex)와 그리드(grid)를 중점으로 배운다. SASS/SCSS도 간단하게 소개해준다. 가격은 6만 원이다. 강의만 있다면 6만 원이 아깝다고 느껴질 수 있다. 하지만 이 강의의 가격의 비쌈은 이 강의를 수강함으로 참가할 수 있는 챌린지로 상쇄된다. 챌린지 이 강의의 강점 중 하나인 챌린지. 2주 동안 매일 (첫째주 일요일은 쉬고, 이따금 이틀짜리 과제가 주어진다) 과제가 주어진다. html, css로 요구사항에 맞춰 웹페이지를 구현하면 된다. 개발 환경은 repl.it 을 사용한다. 실제로는 어느정도 챌린지를 진행 하다보니 repl.it은 불편해서 VSCode에서 작업한 뒤 repl에 복사했다. 적절한 난이도의 과제가 출제된다. 챌린지 초반엔 과제 내용 자체가 낯설어서 시간이 오래 걸릴..

Position 속성 position 속성은 요소의 위치를 정의한다. top, bottom, left, right 속성과 함께 사용하여 위치를 지정한다. position 속성의 값으로 static(기본 값), relative(상대 위치), absolute(절대 위치), fixed(고정 위치) static (기본 위치) static은 position 속성의 기본 값으로 position 속성을 지정하지 않았을 때와 같다. 기본적인 요소의 배치 순서에 따라 위에서 아래로, 왼쪽에서 오른쪽으로 순서에 따라 배치되며 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치된다. 기본적으로 이 값을 지정할 일은 없지만 이미 설정된 position을 무력화하기 위해 사용될 수 있다. 좌표 속성(t..

display 속성 display 속성은 레이아웃 정의에 자주 사용되는 중요한 속성이다. 속성의 값으로 다음과 같은 키워드가 있다. block → block 특성을 가지고 요소(block 레벨 요소)로 지정한다. inline → inline 특성을 가지는 요소(inline 레벨 요소)로 지정한다. inline-block → inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정한다. none → 해당 요소를 화면에 표시하지 않는다. 차지하는 공간도 사라진다. block 레벨 요소 block 특성을 가지는 요소는 아래와 같은 특징을 지닌다. 항상 새로운 라인에서 시작한다. 화면 크기 전체의 가로폭을 차지한다. (width: 100%) width, height, margin, ..

CSS, Cascading Style Sheets Cascading Style Sheets(CSS)는 HTML이나 XML(SVG, XHTML 같은 XML 방언(dialect) 포함)로 작성된 문서의 표현을 기술하기 위해 쓰이는 스타일시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 기술합니다. - MDN HTML5 이전 버전의 HTML에는 style을 컨트롤할 수 있는 태그(font, center)가 존재하여 CSS 없이도 어느 정도 스타일 표현이 가능했으나 정보와 구조를 담당하는 HTML 본연의 역할과 동떨어진 기능까지 추가됨으로써 복잡하고 혼란스러운 언어였다. HTML5에서는 HTML는 정보와 구조, CSS는 style의 정의라는 본연의 임무에 충실한..