VansStory

미디어쿼리 소개미디어쿼리란 PC 뿐만 아니라 모바일과 태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문.media { width: 500px; height: 500px; background-color: red;}/* 미디어쿼리 */@media (min-width: 320px) and (max-width: 800px) { .media { width: 300px; height: 300px; background-color: yellow; }}min-width와 max-width로 브라우저 가로폭 설정브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css 속성으로 대체하겠다는 의미 ..

Transformrotate, scale.rotate(angle): 입력한 각도만큼 회전하며, 음수도 입력 가능.scale(x, y): 숫자는 비율의 의미하며 width를 x배, height를 y배 만큼 확대skew, translate.skew(x, y): x축, y축을 기준으로 입력한 각도만큼 비틂.translate(x, y): 선택한 오브젝트의 좌표 변경prefix 접두사Transform은 CSS의 최신 버전에서만 실행 가능한 키워드이지만, prefix를 추가하면 하위 버전의 브라우저에서도 실행 가능  2. Transitionproperty, duration.property: 효과를 적용하고자 하는 css 속성.duration: 효과가 나타나는데 걸리는 시간timing-function, delay.t..

박스 모델margin과 padding의 차이.margin-left: border 바깥쪽에서 왼쪽에 여백을 만듦.padding-left: border 안쪽에서 왼쪽에 여백을 만듦top, right, bottom, left에 여백을 만들 수 있음공간이 여백을 포함한 크기로 변경되는 점 유의margin은 top right bottom left 순서로 한 줄에 작성 가능  Block 요소와 Inline 요소Block 요소 태그가 대표적줄바꿈 현상이 나타남width/height 값 사용 가능 (공간 만들기 가능)margin과 padding 값 사용 가능 (상하 배치 작업 가능)Inline 요소줄바꿈 현상 없음width/height 값 적용 불가margin /padding /bottom 값 적용 불가마진 병합형제관..

width,heightwidth : 선택한 요소의 넓이를 설정, 고정값(px), 가변값(%)height : 선택한 요소의 높이를 설정 font font-family : 브라우저마다 지원하는 폰트가 다름.입력한 순서대로 우선순위 적용.snas-serif는 마지막에 작성하는 디폴트 값.font-weight100~900 사이의 숫자를 입력할 수 있음  border border-style실선 : solid점선 : dotted 주석과 같이 한 줄에 이어 쓸 수도 있음.이때, 쉼표는 작성하지 않고 띄어쓰기만 함. background background-repeatx축으로 반복 : repeat-xy축으로 반복 : repeat-y반복하지 않음 : no-repeatbackground-position공간 안에서 이미지의 ..

캐스캐이딩CSS 의 우선순위를 결정하는 세 가지 요소순서나중에 적용한 속성값의 우선순위가 높디테일더 구체적으로 작성된 선택자의 우선순위가 높음선택자style > id > class > type 순으로 우선순위가 높음

와 : 부모 자식 관계과 : 형제 관계 원하는 지역에만 css 속성을 적용하기 위해 부모를 구체적으로 표기해야함

선택자(Selector)HTML의 어떤 요소에 CSS 를 적용할 것인가Type태그  Class태그 별명  클래서 이름으로 특정 위치에 스타일 적용  ID 태그 별명 식별자

HTML 태그의 두 가지 성격block 과 inline두 요소를 구분하는 특징들줄바꿈, 가로/세로 배치, 상/하 배치 block 요소y축 정렬 형태로 출력됨(줄바꿈 O)공간을 만들 수 있고, 상하 배치 작업 가능width height 설정 가능 inline 요소x축 정렬 형태로 출력됨공간을 만들 수 없고, 상하 배치 작업 불가

목차: 웹사이트의 최상단의 네비게이션 영역본문: 웹사이트를 구성하는 주요 정보들이 담긴 영역부록: 웹사이트의 최하단의 회사/저작권 정보들이 담긴 영역 , 태그 : 웹 사이트의 머리글(탭에 표시) : 메뉴 버튼을 담는 공간(,, 등과 함께 사용)         , 태그 문서의 주요 내용을 담는 태그하나 이상의태그가 반드시 필요함     태그

HTML이란HyperText Markup Language, 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어눈에 보이는 정보 텍스트 정보, 이미지 정보(회사 슬로건),특정 구역 : 네비게이션, 주요 본문 영역, 가장 밑 사업자 주소 정보주요 정보들의 특징들을 활용해서 그 특징들 별로 구역설정을 하는 과정도 전부 HTML이 담당함.시간이 지남에 따라 자주 사용되지 않는 용어들은 사라지고, 시대에 맞추오 새로운 신조어가 등장. HTML 태그 구성 요소태그명 : HTML이 갖고 있는 고유의 기능, 형태로 입력컨텐츠 : 열린태그와 닫힌태그 사이에 있는 내용물속성 :  HTML 태그가 갖고 있는 추가 정보속성값 : 어떤 역하릉 수행할지 구체적인 명령을 진행하는 것 HTML 문서의 기본 구조 ..