천천히 알아가는 세상

안녕하세요. 이번에는 css의 z-index 기능에 대하여 알아보겠습니다. z-index 태그를 화면에 표시할 때 순서를 바꿀수 있는 속성이며, 태그의 position 값이 relative, absolute 인 경우에만 적용 가능합니다. z-index 값을 설정하지 않으면 기본 코드에 따라서 배치가 됩니다. 만약 부모의 z-index가 1이고 자식이 10이여도 부모를 따라가기 때문에 자식도 1을 받는다. 노란색 원에 z-index: 10 값을 지정하여 초록색 원 밑에 있어야할 노란색 원이 위로 배치된 모습입니다. 파란색 원은 코드의 마지막 줄에 해당하기 때문에 z-index를 적용하지 않아도 초록색 원보다 위에 존재합니다. 파란색 원은 코드의 마지막 줄에 해당하기 때문에 z-index를 적용하지 않아도 ..

안녕하세요. 이번에는 HTML에서 요소의 위치를 조정할 때 사용하는 기능에 속하는 CSS의 Position에 대해서 알아보겠습니다. Position HTML 요소(element)를 원하는 위치에 배치하기 위해서 사용하는 CSS 속성입니다. static, relative, absolute, fixed 속성이 존재합니다. position 속성은 요소의 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용합니다. 1. static 기본적으로 적용되는 값이며, 정적 방식에 해당 합니다. 2. relative 상대적 위치 방식으로 적용되는 속성이며, static 속성을 기준으로 상대적으로 위치를 이동한다. 2-1. Ex1) circle1 (빨간 원)에 relative 속성을 부여하면 ..

[참고용] CSS 적용 우선 순위 1순위 -------------------------------------- 마지막 순위 !important > 인라인 > 아이디 > 클래스/속성/가상 > 태그 > 전체

안녕하세요. 이번에는 CSS 선택자에 대하여 알아보겠습니다. 자세하게 보고 싶으신 분은 공식 문서 페이지를 참고하시면 됩니다. CSS 선택자 문서 페이지 바로가기 일단 CSS 선택자는 크게 2가지 종류로 나뉩니다. 단일 선택자 - 전체(*), 태그, Class, ID 복합 선택자 - 단일 선택자를 혼합해서 사용하는 방식 1. 단일 선택자 h1 h2 h3 p1 p2 2. 복합 선택자 1 2 3 4 5 6 1 2 3 4 5 6 7 test 3. 가상 선택자 E::active {}, E::hover {} 기타 등등 이벤트 관련 CSS 라고 생각하면 됩니다. 네이버 다음 오렌지 딸기 수박 망고 사과 간략하게 설명을 드리자면 우선 div 태그를 CSS를 이용하여 100px 노란색 박스로 만들어줍니다. div 태그..

안녕하세요. 이번에는 CSS3에 대해서 간략하게 알아보겠습니다. 그리고 중간에 상대경로와 절대경로에 대해서 알아보겠습니다. 1. CSS Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어 입니다. 2. CSS 사용 방식 외부 스타일 시트 - 외부 CSS 파일을 불러와서 사용 내부 스타일 시트 - html 문서 내에서 head 태그 내부의 style 태그에 사용하는 방법 인라인 스타일 시트 - html 태그 안에서 style 속성을 사용하는 방법 2-1. 외부 방식 외부 CSS 파일을 불러오는 방식 폴더 구조 ( TEST 폴더 안에 css, html 폴더가 있는 구조) 태그를 이용하여..