![]()
미디어 쿼리 PC 뿐만 아니라 모바일과 태블릿에도 적용되는 웹 사이트를 만들기 위해 사용된다. 모바일에 대응되는 반응형(브라우저 폭을 줄이거나 늘릴 때 자연스럽게 resize 되는 것) 또는 적응형 웹 사이트를 만들 때 사용되는 css 구문이다. 최소, 최대 넓이처럼 범위를 설정해 놓는 것이 미디어 쿼리라고 생각하면 된다. 주의사항 meta 속성을 반드시 넣어줘야 한다. viewport는 기기(노트북, 태블릿 등)의 화면을 의미한다. 너비와 배율은 content 안에서 정하고 device-width는 말 그대로 디바이스의 너비를 의미하고 initial-scale은 꼭 1.0으로 해줘야 한다. 만약 미디어 쿼리 안에서 background-color를 지정해주지 않는다면 그대로 yellow로 나타난다. ->..
![]()
Transform rotate : 입력한 각도만큼 특정 오브젝트를 회전시킨다. 음수도 가능하다. scale : 오브젝트를 확대, 축소시킨다. High 버전에서도 사용할 수 있게 해 준다. Transition (특정 조건 하에 연속적으로 변함) property : 점점 변해가는 과정을 적용할 속성을 넣어주면 된다. duration : 변하는 시간을 설정한다. timing-function : 속도의 성격을 정한다. delay : 특정 조건일 때(ex 마우스를 올려놨을 때) 효과를 몇 초 뒤에 발동시킬 건지 정한다. 순서는 상관없지만 duration 다음에 delay가 나와야 한다! hover를 쓸 때 .transition:hover 이런 식으로 붙여 써야지 잘 동작한다! (.transition :hover)..
![]()
Display inline 요소도 block 요소처럼 바꿀 수 있다. Float 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시킬 때 사용한다. 말 그대로 레이어를 띄운다는(float) 의미다.(화면 바깥?으로 띄운다고 생각하면 될 듯) Clear float를 제어할 때 사용한다. 보통 clear:both; 를 사용한다. 브라우저와 공간 사이의 공백 제거 html과 body 자체가 margin과 padding을 가지고 있기때문에 모두 초기화를 해야한다. 디자인 할 때 필수적으로 해줘야 되는 부분이다!
![]()
margin과 padding 위 사진처럼 border 바깥은 margin, border안쪽은 padding이라고 한다. 그리고 각 속성은 left, right, top, bottom으로 구성되어 있다. 열두 시 기준으로 시계방향 이라고 생각하면 된다. top, right, bottom, left 순서로 작성하면 된다 margin: 0 auto; 는 x축 기준으로 중앙 정렬을 해준다. margin 병합 현상 같은 부분에 margin이 적용되면 겹쳐진다(숫자가 큰 값이 적용된다). 자식에게 margin을 적용하면 부모에게까지 적용된다. 가장 많이 발생하는 경우라고 한다. position : absolute; 로 해결할 수 있다!
![]()
font-family font-family에 여러 값을 넣을 수 있는데 마지막은 sans-serif로 해주는 게 좋다. -> 모든 브라우저에서 지원하는 default 값이기 때문이다. background background-image는 공간을 이미지로 모두 채우려고 하는 속성이 있다. 한 축으로만 반복하고 싶다면 background-repeat: repeat-y; 혹은 repeat-x; 를 사용하면 된다. default는 background-repeat: repeat; 이다. 반복이 싫다면 background-repeat: no-repeat;로 설정하면 된다. background-position은 background의 위치를 지정해 준다. 오른쪽 위에 위치시키고 싶다면 right top 처럼 쓰면 된다...
![]()
Block 요소와 Inline 요소를 구분 짓는 세 가지 특징 줄 바꿈 현상이 있는가 가로, 세로 공간에 대한 크기를 만들 수 있는가 상, 하 배치가 가능한가 Block 요소 y축 정렬 형태로 출력된다(줄 바꿈 현상이 나타난다). 공간을 만들 수 있고 상, 하 배치 작업이 가능하다. Inline 요소 x축 정렬 형태로 출력된다(한 줄에 출력된다). 공간을 만들 수 없고 상, 하 배치 작업이 불가능하다.
구조를 잡을 때 사용하는 태그 웹 사이트의 머리글을 담는 공간이다. 메뉴 버튼을 담는 공간이다. , , 와 함께 사용한다. 문서의 주요 내용을 담는 태그이다. IE(Internet Explorer)는 지원하지 않으므로 role="main" 속성을 필수로 입력해야 한다. 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그이다. 태그 내에 구역을 대표하는 타이틀 태그가 존재해야 한다. 가장 하단에 들어가는 정보를 표기할 때 사용한다. 임의의 공간을 만들 때 사용한다.
HTML 기본 태그 정보성을 갖고 있는 이미지를 삽입한다. src 속성 : 삽입할 이미지 파일 경로 alt 속성 : 웹 사이트가 이미지를 출력하지 못했을 경우에 텍스트 정보로 대체한다. Heading의 약자로 제목이나 부제목을 표현한다. 숫자 값이 클 수록 폰트 사이즈가 작다. 즉, 숫자는 정보의 중요도를 나타낸다. 태그는 가장 중요한 정보를 담기 때문에 하나의 html 문서에서 한 번만 사용된다. Paragraph의 약자로 본문 내용을 표현한다. 웹 사이트의 중요 정보를 담는 태그이다. Unordered list의 약자로, 순서가 없는 리스트를 생성한다. 첫 번째 자식으로 태그를 쓰고 메뉴 버튼을 만들 때 사용한다.
