천천히 알아가는 세상

안녕하세요. 이번에는 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 폴더가 있는 구조) 태그를 이용하여..

안녕하세요 이번에는 HTML 태그 중에서 표에 해당하는 Table 태그에 대해서 알아보겠습니다. 1. Table 태그 기본 사용 방법 표에서 tr 태그는 행을 의미하고, td 태그는 열을 의미한다. border 은 표 테두리를 설정하는 속성으로 지금은 1두께로 설정한 상태입니다. 1 2 3 4 5 6 2. Table 태그의 간단한 속성 - border : 테두리 두께 - cellspacing : 경계선 사이의 여백의 크기 - cellpadding : 칸 안의 여백의 크기 그 외 여러 가지 속성이 존재합니다. 3. TD 태그 속성 - 가로 병합 : colspan - 세로 병합 : rowspan 1 2 3 4 7 8 4. 실습코드 더보기 4-1. 달력 2019년 6월 日 月 火 水 木 金 土 1 2 3 4 ..