코린이탈출

display:flex; Flex 컨테이너에 display:flex; 를 적용하는 것이 시작 Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 됨 마치 inline 요소들 처럼요. height는 컨테이너의 높이만큼 늘어납니다. row (기본값) 아이템들이 행(가로) 방향으로 배치됩니다. row-reverse 아이템들이 역순으로 가로 배치됩니다. column 아이템들이 열(세로) 방향으로 배치됩니다. 그냥 block 요소들을 쌓아 놓은 것처럼 보이죠? column-reverse 아이템들이 역순으로 세로 배치 됩니다. 크기가 작은 모바일 기기에서 column으로 배치하다가 일정 폭 이상이 되면 row로 바꿔주는 식으로 반응형 레이아웃을 구현할 수도 있겠네요~

static 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해줄 수 없음 absolute 절대 좌표와 함께 위치를 지정해줄 수 있음 relative 원래 있던 위치를 기준으로 좌표를 지정함 fixed 스크롤과 상관없이 항상 문서 가장 왼쪽위를 기준으로 좌표를 고정함 inherit 부모 태그의 속성값을 상속받음

none : 보이지 않음 요소를 렌더링하지 않도록 설정함 영역도 차지하지 않음 block : 블록 박스 div 태그, p 태그, h 태그#, li 태그 등이 해당됨 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보임 width, height 속성을 지정할 수 있음 block 요소 뒤에 등장하는 태그가 이전 block 요소 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링 inline : 인라인 박스 span 태그, b 태그, i 태그, a 태그 등이 해당됨 block과 달리 줄바꿈이 되지 않음. width, height 를 지정할 수 없음 inline-block : block과 inline의 중간 형태 block과 inline의 중간 형태 줄 바꿈이 되지 않지만, ..

공백 부모 태그 하위에 있는 태그에 스타일 적용 가능 부모선택자 자식선택자{ 속성1:속성값; 속성2:속성값; } 특수문자 " > " 공백을 넣은 것과 비슷하지만, 두 태그 사이에 다른 태그가 없는 순수 부모-자식 태그 간의 관계만 적용됨 sec1 sec2 sec1에만 적용됨 sec2에는 적용되지 않음 ⇒ aa와 cc사이에 bb가 있기 때문

가상 클래스 선택자 :link 방문한 적이 없는 링크 :visited 방문한 적이 있는 링크 :hover 마우스를 올렸을 때 :active 마우스를 클릭했을 때 :focus 포커스 되었을 때 (input 태그 등) :first 첫번째 요소 :last 마지막 요소 :first-child 첫번째 자식 :last-child 마지막 자식 :nth-child(2n+1) 홀수 번째 자식

가상 요소 선택자로 선택한 요소의 뒤에 붙여 표기하는 미리 약속된 키워드 요소의 특정한 부분에 정해진 기능을 하도록 가상 요소 키워드 별로 미리 기능이 정의되어 있음 요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 하나의 하위 요소처럼 사용할 수 있음 가상 요소 설명 ::before 요소 내용 앞쪽에 새 컨텐츠를 추가 ::after 요소 내용 끝에 새 컨텐츠를 추가 ::selection 마우스 드래그로 선택한 텍스트 컨텐츠 영역을 선택 ::marker 목록 아이템 앞에 붙는 마커를 선택 ::first-letter 현재 웹 브라우저에 보이는 상태를 기준으로 요소의 텍스트 컨텐츠 첫 글자를 선택 ::first-line 현재 웹 브라우저에 보이는 상태를 기준으로 ..

content 와 같은 상황 #wrapper{ height : auto; min-height: 100%; } footer{ position : relative; transform : translateY(-100%); } div 내 컨텐츠가 짧아 스크롤이 발생하지 않는다면, wrapper를 통해 강제로 컨텐츠의 길이를 늘이고, 그 아래에 footer를 놓아줌 footer의 높이만큼 overflow가 발생하여 스크롤이 footer 높이만큼 발생함 => 를 통해 footer의 높이만큼 footer를 강제로 올려주어 해결. wrapper내 콘텐츠가 짧다면 min-height가 적용되어 문제가 없고, 콘텐츠가 길어서 스크롤이 발생할 때는 그에 맞게 height를 자동으로 늘려줌

태그는 사용자로부터 입력 받을 수 있는 HTML 입력 폼(form)을 정의할 때 사용함 속성명 속성값 설명 action URL 폼 데이터가 서버로 제출될 때 해당 데이터가 도착할 URL을 명시함 target _blank _self _parent _top 폼 데이터를 서버로 제출한 후 받는 응답이 열릴 위치를 명시함 method get post 폼 데이터가 서버로 제출될 때 사용하는 HTTP메소드를 명시함 폼태그에 대한 설명 http://www.tcpschool.com/html-tags/form 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 폼태그의 타겟에 대한 설명 http://www.tcpschool.com/htm..