Front-end85 HTML/CSS - Position (relative&absolute) 1. Position - 웹 사이트를 만들 때, 여러가지 요소를 사용한다. 이 요소들을 조금씩 개발자가 원하는 위치에 배치하기 위해서 사용하는 속성중 하나가 position이라는 속성이다. 사용할 기본 구조는 아래 사진과 같다. 1) position: fixed; - fixed속성값을 사용하면 스크롤을 내려도 요소의 위치가 고정되어있게 된다. - fixed 속성값을 이용하기 위해서는 알아야 할 중요한 것이 있다. 바로, layer가 달라지는다는 것이다. 예시) 두개의 div태그가 있다. 1번 태그는 일반적인 div이고 2번 태그는 fixed 속성값을 적용한 태그이다. 그러므로 스크롤을 움직이면 1번 div는 제자리에 있고 2번 div는 고정된 자리에 그대로 위치한다. 하지만, 2번 div는 1번div의 .. 2020. 8. 24. HTML/CSS - Inline_block & Flex_box 1. inline-block - style에 있는 display속성을 이용하면 inline을 block처럼 block을 inline처럼 이용할 수 있다. - 그러나 block타입을 inline속성으로 바꿔주면 화면에 잘 보이지 않는다. (아래 사진참고) -위의 사진은 div 3개를 그대로 출력한 것이다. 이를 inline 속성으로 바꿔주면 아래의 사진처럼 제대로 출력되지 않는 것을 볼 수 있다. - 이런 문제를 해결하기 위해 display속성에 inline-block이라는 속성을 이용하여 해결한다. 이를 이용하면 block을 inline 형식으로 출력할 수 있게 된다. (아래 사진 참고) - 하지만, inline-block 속성에는 문제가 많다. 위의 사진에서 볼 수 있듯이, 개발자가 만들지 않은 공백이.. 2020. 8. 24. HTML/CSS - Block & Inline 1. Blocks and In-lines - HTML의 태그들은 크게 Block과 In-line으로 분류되고 어떻게 정렬되느냐의 차이가 있다. Blocks: HTML 요소간의 정렬이 수직으로만 가능하다. 즉, 요소 옆에 다른 요소를 배치할 수 없다. ex) div, p태그 등 In-lines: HTML 요소간의 정렬이 수평으로 가능하다. 즉, 요소 옆에 다른 요소를 배치할 수 있다. ex) span태그 등 ex) 1개의 div와 3개의 span태그를 이용하여 아래와 같이 요소를 생성해보겠습니다. - 위의 사진을 보면 div옆에 공간이 많은데 불구하고 span태그가 div태그 아래에 배치되어있는 것을 볼 수 있다. 왜 그런 것일까? - div태그는 Block형태의 태그이기 때문에 수직정렬만 가능하다. 눈으.. 2020. 8. 18. HTML/CSS - 기본구조 및 tags 1. MDN HTML 문서 - HTML에는 정말 다양한 태그가 있습니다. 모든 태그를 다 기억해서 사용하는 것은 쉽지 않고 자주 사용하는 태그를 기반으로 모르는 태그나 필요한 기능은 검색을 하는 방식으로 사용합니다. - 구글에 HTML 관련검색을 할 경우, 검색어 뒤에 mdn을 붙이면 HTML 태그가 정리되어 있는 Mozilla의 문서가 검색 결과로 는데 이 문서에는 더욱 정확한 태그 설명과 사용법 그리고 한국어도 지원하니 이를 참고하시길 바랍니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element HTML elements reference This page lists all the HTML elements, which are created using.. 2020. 8. 17. 이전 1 ··· 7 8 9 10 다음
