Front-End/HTML_CSS18 [CSS] Position absolute 정리 오늘은 CSS의 Position 설정에 대해 알아보자. Position에는 아래와 같은 설정들이 있다. position: static; position: relative; position: absolute; position: fixed; position: sticky; Position: static static 설정은 위 사진과 같이 위처럼 박스가 배치된다. 기본 설정으로 따로 position 설정을 하지 않으면 기본적으로 static 값이 적용된다. 위에서 아래대로 흐름대로 배치가 되며 top, right, bottom, left, 그리고 z-index 등과 같은 설정값이 전혀 효과가 없는 게 특징! Position: relative relative 설정은 static + top, right, bott.. 2022. 1. 7. CSS Flexbox 말로만 듣던 Flex 오늘 한 번 해보도록 하자. 물론 방구석 css flex... Flex는 flexible의 약자로 유연하게 박스가 움직이며 레이아웃을 구성하는 방법이다. 딱딱하게 굳어있는 내 웹페이지에 유동성을 불어넣어 줄 아주 유용한 스타일이라 할 수 있다. 적용방법 1. 부모박스와 자식박스를 준비한다. 2. 부모박스에 "display: flex"를 적용한다. 3. 부모박스에 flex가 적용되면, 아래 자식 박스들은 그 영향을 받게 되고 왼쪽 정렬로 착 정렬된다. (약간 inline-block 같은 느낌이랄까...) 4. 마지막으로 부모 혹은 자식박스에 하위속성들을 적용해서 예쁘게 꾸민다. 하위속성 flex: 하위속성으로 자식박스의 grow, shirnk, basis 값을 설정할 수 있다. 부모박.. 2021. 10. 19. CSS 셀렉터 오답노트 오늘은 CSS 연습문제를 풀면 틀렸던 부분과 몰랐던 개념들을 정리해 본다. 오답리스트 #lable.center {...} id가 label이면서 동시에 class가 center인 엘리먼트를 선택합니다. .show#only {...} class가 show이면서 동시에 id가 only인 엘리먼트를 선택합니다. section h2 {...} swection의 후손 엘리먼트 중 h2 엘리먼트를 선택합니다. article + p {...} +는 article과 인접한 형제 엘리먼트 p를 선택합니다. section ~ p {...} ~는 section과 인접한 형제 엘리먼트 p를 모두 선택합니다. div:nth-last-child(2) {...} div의 자식 엘리먼트 중에서, 마지막에서 두 번째 엘리먼트가 div.. 2021. 10. 19. CSS 박스모델 HTML/CSS 태그들은 각자의 영역을 가지게 되고 각자의 영역들이 박스(공간)을 가지게 된다. 박스는 항상 직사각형이고, 너비와 높이를 가지게 되는데 CSS를 통해 그 크기를 설정할 수 있다. 그중 필수적으로 이해해야할 개념이 하나 있는데, 바로 block / inline / inline-block 개념이다. 줄바꿈이 되는 박스 : block 대표적 태그: 줄바꿈이 되는 박스란 태그를 사용했을 때 다음 태그가 저절로 줄바꿈이 되는 태그를 뜻한다. 즉 태그를 사용하면 줄 전체 공간을 차지하며 이외의 태그가 배치되지 못한다. 옆으로 붙는 박스 : inline 대표적 태그: 옆으로 붙는 박스란 콘텐츠의 내용만큼 공간을 차지하기 때문에 줄 전체 공간을 차지 하지 않는다. 남는 공간에는 다른 태그들이 공간을 차.. 2021. 10. 10. HTML 태그 오늘은 마크업언어 HTML에서 자주사용되는 태그들에 대해 알아보자 자주 사용되는 태그 리스트 태그 설명 Division Span Image Link & Unordered List & List Item Input (Text, Radio, Checkbox) Multi-line Text Input Button HTML태그는 수십개가 넘지만 다른 언어의 메소드와 마찬가지로 우선은 자주사용하는 것들을 위주로 배우고, 필요한 기능이 있으면 그때 그때 찾아서 사용하는게 좋다. div vs span div와 span태그는 웹페이지의 공간을 나눌 때 사용한다. 이전에는 많이 사용된 태그이지만 HTML5 이후 시멘틱 태그가 소개되면서 이후 Section태그로 대체되고 있다. 이 둘의 차이점은 대략 다음과 같다. div는 .. 2021. 10. 9. HTML 기본구조 이번에는 HTML의 구조에 대해 알아보자 HTML 요소(element) 콘텐츠내용 위의 구성요소들을 모두 HTML의 요소라고 부른다. 그리고 위와같이 시작과 끝을 알리는 태그를 시작태그(opening tag) 종료태그(closing tag)라고 한다. class="클래스명" 시작태그 내에서 클래스나 스타일 등을 설정하는 것을 속성( attribute)이라고 부른다. 속성은 다시 두가지로 나눠질 수 있는데, 속석의 이름(attrbute name)과 속성의 값(attribute value)이다. 위의 예제를 통해 알아보자면, class는 속성의 이름(attribute name) 그리고 "클래스명"은 속성의 값(attribute value)가 된다. 2021. 10. 9. 이전 1 2 다음
