미디어 쿼리(media query)란? 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나 ●반응형웹 하나의 웹사이트에서 PC,스마트폰, 테블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법 문법 @media 매체유형 and(속성에 대한 조건){ css코드 .... } ✔매체유형 all : 모든 매체 screen : 컴퓨터,테플릿,스마트폰 print : 프린터 speech : 스크린 리더 예시를 보며 결과를 보자 HTML 코드 인스타그램 유튜브 페이스북 트위터 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum officiis nemo ali..
Flex 란? 수평정렬을 하기 위한 속성, 다양한 속성값과 결합하여 디스플레이를 나타내 보자 ●flex-wrap 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성 1.nowrap : 기본값 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치 2.wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘기기 3.wrap-reverse : 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김 (단, 아래쪽이 아닌 위쪽으로 넘김) ●flex-direction 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성 1.row : 기본값 . 가로로 배치 2.row-reverse : 가로로 배치(반대로) 3.column :세로로 배치되는 4.column-reverse :세로로 배치 (반대..
다단 레이아웃 이란? 텍스트를 column속성으로 다단을 생성해주는것 문법 column-count : 단의 갯수를 설정 column-rule : 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정 column-gap : 단과 단사이의 여백을 설정 column-span : 단과 안의 포함된 요소를 다단편집에서 해제(all) HTML 코드 다단 레이아웃 Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae dolorum error itaque dolores id, in, quasi eum obcaecati labore quam assumenda natus odio iure? Ut voluptatibus impedit suscipit si..
clear란? float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해주는 것! ✔ -float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 힘듬 -clear 속성을 이용하여 float 이후에 등장하는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정(left,right,both) HTML 코드 clear Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusamus consectetur, cupiditate officiis ex id. Mollitia, quia? Maiores saepe fugiat, aspernatur libero distinctio voluptatum pl..
float란? HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만들기 위해 사용하는것! float 특징 - float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐 - float를 적용받은 요소의 방향을 결정(left,right) - 컨텐츠 크기 만큼만 영역을 설정(블록) - float를 적용받은 요소는 다른 요소보다 위쪽에 위치(배경보다 위) 바로 코드를 보며 이해해보자 HTML 코드 float1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut est reiciendis, voluptatibus modi tempora vitae earum repudiandae autem inventore neque ess..
z-index란? 겹쳐지는 요소들의 쌓이는 순서를 결정하는것! 순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래 위치하게 됨 예시를 보면 직관적으로 이해 할 수 있다. HTML 코드 z-index 1번째 div 2번째 div 3번째 div 결과물
Position 요소의 위치를 결정하는 방식을 설정 1.정적 위치 지정방식 -static position. 기본값 -HTML 요소의 위치를 결정하는 기본적인 방식 -단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식 2.상대 위치 지정방식 -realative position -HTML 요소의 기본 위치(✔정적 위치 지정방식)를 기준으로 위치를 재설정 하는 방식 -top, left, right, bottom 속성값을 사용하여 재설정 3.고정 위치 지정방식 -fixed position -웹 페이지가 스크롤 되어도 고정위취로 지정된 요소는 항상 같은 곳에 위치 -뷰포트를 기준으로 위치를 설정하는 방식 -top, left, right, bottom 속성값을 사용할 수 있음 4.부모태그를 이용..
디스플레이 웹 페이지의 레이아웃을 선택하는 속성 block, inline, inline-block, none ✔visibility : hidden -> visibility :visible 숨김 , 나타내기 ●디스플레이 none -> 보이지 않고 자리도 존재하지 않는다. ●visibility: hidden -> 자리는 있는데 보이지는 않음 차이를 예시를 통해 알아보자 HTML 코드 디스플레이 display 속성값을 none으로 설정 display 속성값을 none으로 설정 visibility 속성을 hidden으로 설정 visibility 속성을 hidden으로 설정 none으로 설정한 값은 아예 보여지지 않지만 hidden속성으로 만든 값은 자리는 차지하는 모습을 볼 수 있다.
모든 HTML 요소는 박스 모양으로 구성 박스 모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함 1.내용(content) 텍스트나 이미지가 들어있는 박스의 실질적인 내용부분 2.패딩(padding) - 내용과 테두리 사이의 간격 - padding-top, padding-right, padding-bottom, padding-left - padding: 위 오른쪽 아래 왼쪽순으로 설정 설정시 암묵적인 부분이 있으므로 예시를 통해 알아보자 padding:20px 50px 30px 10px 위 20 오른쪽 50 아래 30 왼쪽 10 padding:20px 50px 30px 위 20 오른쪽,왼쪽 50 아래30 padding:20px 50px 위,아래 20 오른쪽,왼쪽 20 padding:20px 전..
CSS배경 ●background-color -HTML 요소의 배경색을 설정 ●background-image - html 요소의 배경으로 나타날 배경 이미지를 설정 - 배경 이미지는 기본 설정으로 반복되어 나타남 background-image:url(파일경로) ●background-repeat -배경 이미지를 수평이나 수직방향으로 반복하도록 설정(repeat-x repeat-y no repeat) ●background-position -반복되지 않는 배경 이미지의 상대 위치를 설정 -%나 px을 사용해서 상대위치를 직접 설정할 수 있음 -상대 위치를 결정하는 기준은 왼쪽 상단(left top) ●background-attachment - 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있음 - 고정..
