CSS에서 레이아웃 끝판왕 Grid. Flex와 비슷한 점이 많지만 확실히 다르다. flex는 1차원 (한방향 레이아웃)이고 grid는 2차원 (양방향)이기 때문이다. 참고로 Grid는 IE 10 , 11 버전에서 구버전 스펙으로 지원된다. 참고로 현재까지는 레이아웃을 위한 기능으로 grid보단 flex를 훨씬 더 많이 사용한다. (flex 사용량은 80% 가까이, grid는 10%채 안된다...) https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com grid가 쉽게 이해되는 재미있는 게임. 꼭 플레이 해보시길... Grid에 필요한 용어 및 개념 grid도 flex와 마찬가지로 컨테이너..

https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 생각보다 재미있었던 개구리 flex게임 Flex flexbox 혹은 flexible box라 불리는 flex는 아이템 공간 배분/정렬 기능을 제공하기 위한 기능이다. (1차원 레이아웃 모델) + Flex 기능을 이용하여 Holy grail layout을 만들 수 있다. flex가 있기 전에는 로 했었다는 끔찍한 전설이.... 우선, Flex를 사용하기 위해서는 꼭! Container역할을 하는 요소가 있어야 한다. 요롷게 부모 역할의 container가 있어야 한다. 이 때, item의 width는 콘텐츠 크기로 정해지고, 높이는 con..

원래 내가 알고 있었던 CSS의 선택자들은 빙산의 일각이었다.... 12일째 날에는 css 선택자(selector)에 어떤 것들이 있는지 그리고 항상 눈으로 봐와서 어떤건지만 대~충 알고 있었던 "가상 클래스 선택자"와 "가상 요소 선택자"를 좀 더 자세히 알게 되었다. 그리고 드디어 CSS의 하이라이트, Flex 진도를 나가게 되었다... 무서워... https://www.w3schools.com/cssref/css_selectors.asp CSS Selectors Reference W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular sub..

이전에는 CSS에서 인라인 요소 / 블록 레벨 요소가 가지는 기본적인 위치 지정 속성에 대해서 배웠다면 더 나아가 float, grid, flex 3형제가 있다. (나한텐 참 복잡하다...) float에 대해 정리해 보고 float가 가는곳엔 항상 따라다니는 overflow에서도 정리해보려 한다. Float 이전 글에서 언급했다시피 html에서 블록 레벨 요소는 한줄을 다 차지 하여 다음 요소는 바로 밑줄에 내려 오게 된다. 이러한 블록 레벨 요소들을 다른 요소들과 어울리며 정렬 시켜 주는 것이 'float' 속성. float:left float:right로 블록 레베 요소들을 좌측, 우측 정렬할 수 있다. float:right의 속성을 줄 경우, 오른쪽에 해당 블록 요소가 위치하게 되고 나머지는 박스의..

이전 포스팅 "font"와 관련이 있는 text 관련 속성들을 배웠다. 특히 baseline은 인라인 요소와 밀접하게 관련이 있으니 제대로 알고 넘어가야겠다고 생각했다. line-height(행간) line-height 속성으로 행간의 크기를 조정할 수 있다. 기본값은 line-height: normal; (font-family에 따라 기본 line height 값이 다르다.) 숫자 단위로 폰트 크기의 배수로 값을 줄 수 있다. 소수점까지 입력 가능. line-height: 1 은 폰트 크기 1배, 즉 font-size 크기 만큼의 글자 높이를 의미한다. line-height: 2 는 font-size의 2배를 의미한다. 위 이미지의 텍스트가 들어있는 박스에는 margin과 padding 모두 0이다. ..

CSS에서 사용되는 여러 단위 css에서 사용되는 단위는 절대 길이 단위 / 상대 길이 단위가 있다. 절대 길이 단위 cm, mm, px 등 pixel (picture + element)는 '화소'를 나타내는 단위로 이미지를 표현하는 가장 작은 단위이자 CSS에서 가장 많이 쓰이는 단위이다. 상대 길이 단위 em은 부모의 font-size가 기준점이다. 즉 em=1 은 100%를 의미하여 부모의 font-size가 24px이면 em=1=24px이 된다. 만약 자식의 font-size를 0.5em 으로 설정하면 24 * 0.5 = 12 즉, 자식의 font-size는 12px이 된다. 부모 폰트의 px크기 * 자식 폰트의 em 값 = 자식 폰트의 px값 %(퍼센트)는 말 그대로 크기의 비율을 나타낸다. 기..

각 브라우저마다 제공하는 요소의 기본 스타일은 다 다르다. 나는 현재 chrome과 firefox를 번갈아가며 쓰고 있는데, 같은 속성 태그를 사용하여도 chrome과 firefox에서는 다르게 보여진다. 이러한 점은 웹페이지를 구현할 때 문제가 된다. 바로 브라우저마다 각각 다른 스타일을 만들어 적용시켜 주어야 한다는 것.... 이러한 비효율을 개선하기 위한 것이 에릭마이어의 Reset CSS https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default..

테이블. 표. 엑셀할때 정말 자주 접했던 데이터 형식이다. 엑셀에서 테이블 표를 만들 수 있듯이, HTML에서도 테이블 데이터를 만들 수 있다. HTML의 Tabular Data를 이용한 2022 달력 만들기. https://doridori-samsam.github.io/FrontendSchool_2/2022calendar/table_calendar 2022 Calendar Table doridori-samsam.github.io Tabular Data 태그는 컨테이너 요소이다. (여러가지 다른 요소들을 묶어줌) -의 자식들- - 제목 - table heading 행,열의 머리말을 나타낼 때 - 나눈 행에서 셀을 분리할 때 - 테이블 행을 나눌 때 하나의 에는 하나의 //를 사용하여야 한다. Colspa..

코드라이언 수업 6일 내용. 생화코딩 HTML/CSS 수업과 여러 css 수업을 들으면서 익숙해져 있다고 생각했지만 아직도 처음 접하거나 두리뭉실하게 알고 있는 것들이 많다. 열심히 TIL 포스팅하자.벌써 이틀이나 밀렸어.... 정신차리자 소현아 ㅠㅠ - HTML Layout 관련 footer에는 태그를 쓰지 않는다. 요소는 한번만 쓰는 것이 좋고, 당므으로 가장 포괄적인 태그로 볼 수 있다. 위젯(마이페이지, 장바구니 등)은 로 쓸 수 있다. 단독적으로 쓰이고 다른 콘텐츠가 대체할 수 없는 콘텐츠일 경우 을 쓰는게 좋다. 안에 은 하나만. 태그는 목록이 적어도 3개 이상일 때 쓰는 것이 좋다. 에도 heading이 필요하다. - 저작권이나 법률 관련 작은 문구를 나타낼 때 쓰임. - HTML Form ..