HTML5

[2021/12/20]국비지원 CSS3 2-(5)-{2} a link (하이퍼링크)

가상 클래스 ( psuedo-class ) :link : 아직 방문하지 않은 링크 ( 브라우저 상의 기록이 없는 경우 default 색상 파란색 ) :visited : 이미 방문한 링크 ( default color : 보라색 ) :active : 마우스 클릭한 상태 :focus : 클릭당하고 주목받은 상태 ( 그 외 :first-child / :nth-child / :first-of-type 등이 있으나 후에 한 번 더 정리해서 올릴 예정 ) menu menu menu menu 결과물 1. hover 전 2. 각각 hover 후

[2021/12/20]국비지원 CSS3 2-(5)-{1} a link (하이퍼링크)

가상 클래스 (psuedo-class) : 출력할 html 데이터 상 실질적으로 형태가 없는 것을 지정하는 방법 :hover : 마우스 커서를 올렸을 때 어떤 효과가 나타남 ( a의 나머지 가상 클래스는 다음 파트에 ) 변화가 없는 형태의 하이퍼링크 처음으로 메뉴1 메뉴2 메뉴3 메뉴4 롤오버가 있는 형태의 하이퍼링크 처음으로 메뉴1 메뉴2 메뉴3 메뉴4 롤오버가 있는 형태의 하이퍼링크1 처음으로 메뉴1 메뉴2 메뉴3 메뉴4 롤오버가 있는 형태의 하이퍼링크2 처음으로 | 메뉴1 | 메뉴2 | 메뉴3 | 메뉴4 결과물

[2021/12/20]국비지원 CSS3 2-(4) list-style

목록에는 총 3종이 있는데, 비 순서형 ul 순서형 ol 정의형 dl 이 중에서 이 list-style이 통용되는 목록은 ul과 ol이다. list-style-position : list 심벌(지금으로 치면 검고 작은 원)의 위치 outside : default. list 항목은 그대로 있고 그 앞에 심벌이 나타남. inside : 심볼이 붙을 경우 항목들이 들여 쓰기 됨 list-style-type : 심벌의 모양 disc : default. 상기의 심볼형태 circle : 속이 빈 원형 심벌 square : 검은 사각형. default 사이즈 upper-alpha : 영어 알파벳 대문자 lower-alpha : 영어 알파벳 소문자 list-style-image : 잘 쓰이지는 않지만 이미지로 심벌을 ..

[2021/12/20]국비지원 CSS3 2-(3) overflow

overflow : 일정한 박스, 영역 안의 내용이 그 바깥까지 과하게(over) 넘치는(flow) 것에 대한 속성. x축, y축 통합 설정 overflow-x : x축으로 넘침 overflow-y : y축으로 넘침 hidden : 무조건 숨김 scroll : x축 y축 둘 다 스크롤바가 생김 auto : 자동으로 조정 (x축으로 넘칠 것 같으면 x축 스크롤바, y축으로 넘칠 것 같으면 y축 스크롤바) visible : default. 영역 무시하고 전체 표시 overflow 속성의 적용 결과 콘텐츠의 내용이 박스의 크기를 넘어가는 경우 박스 크기만큼만 보이고 나머지 콘텐츠는 보이지 않도록 숨길 수 있다. 박스의 크기와 콘텐츠의 내용과 상관없이 박스에 스크롤바를 생성할 때는 overflow:scroll;..

[2021/12/20]국비지원 CSS3 2-(2) Background

background property : 통합 가능하며, 그 순서는 color부터 attachment의 순으로 이뤄짐 background-color : 배경색. 색상은 red blue black과 같은 naming color 또는 rgb, rgba, hsl, hsla과 같은 색상코드로 입력 가능 background-image : 배경에 넣을 이미지 background-repeat : 배경이미지 등을 반복적으로 표현할 것인가, 에 대한 것 한번만 하겠다 : no-repeat 반복적이어야 한다 : repeat x축반복 : repeat-x y축 반복 : repeat-y background-position : 위치값 설정 default = left top, 0 0 50% 50% = center center 100..