밍숲의 코딩&웹퍼블리셔 LOG

float 속성 / clear:both / clear를 class로 만들어 사용하기(부모요소 넓이값 확보, float 해제) clear 속성은 float 속성을 해제 할 때 사용한다. 요소들을 inline처럼 가로로 배치할 때 float라는 속성대신에 flex가 더 자주 사용되지만, float를 사용할 때는 부모의 높이 값 확보를 위해서 clear속성을 사용해준다. 예시를 통해 알아보도록 하자 html구조는 간단하게 div4개를 만들었고 각각의 박스에 색상을 주었다. div는 기본적으로 block요소이기 때문에 세로로 배치가 되는데, 이때 float를 사용하면 한줄로 배치된다. 각 요소들을 왼쪽이나 오른쪽 한 쪽으로 나란히 배열하고 싶다면, 각 요소에 'float:방향' 을 주어도 되고 그 요소들을 한꺼..

css에서 root, var을 활용하여 변수값 지정 css3에서 새로 업데이트 된 속성인 '변수 지정'이다. 변수의 개념은 css에서 존재하지 않았으나 보다 편리하게 속성을 지정하기 위한 방법이 나왔으니.. 위의 코드를 가지고 간단한 사각형을 만들었다. 그럼 변수는 어떻게 지정할까? 바로 root, 변수명만 있으면 끝 (:root는 html로 변경할 수도 있다.) :root { --'변수명' : 속성값 } 그 후 :root 내부에 설정한 변수명을 var('변수명')으로 속성내부에 써주면 된다. 그럼 결과는 이렇게 동일하게 나온다. 즉, brown이라는 color는 color, background-color, border 등등..의 속성에 다 사용이 가능하고 30px은 내가 임의로 margin 30px으로..

지난번에 이어서 a요소의 접근성에 대해 알아보겠다. 이러한 nav를 만들기 위해서 ul>li>a를 이용하여 만들었다. 배경은 background-color와 border-radius 속성을 이용하여 원을 만들고 background 속성을 이용하여 이미지를 삽입함. 여기서 사실 html의 'facebook', 'google', 'twitier' 등의 글씨는 어차피 text-indent로 없애줘야 해서 안써도 되는 부분인데 왜 써야할까? 바로, Screen Reader가 재대로 작동하기 위해서! Screen Reader 란? 시각 장애인들에게 화면의 내용과 자신이 입력한 키보드 정보나 마우스 좌표 등을 음성으로 알려 주어 컴퓨터를 사용할 수 있도록 도와주는 프로그램. screen reader에서는 text로..

css접근성 측면에서의 가상선택자 hover, active, focus 활용법 알아보기 위와 같은 코드를 바로 실행시켜보면 이상태로, reset을 해준후에 간단한 nav를 만들어 보려고 한다. 가상선택자에는 hover : 마우스 커서가 영역안으로 들어갈 때 focus : 선택자 작업 준비 및 선택한 부분 지속적 선택 active : 작업시 진행되는 선택자 visited : 방문 후 보이는 선택자 색상 link : 링크 그자체 (a요소의 색상이라고 보면됨) 총 5개가 존재하는데, 여기서 주로 사용되는것은 위에 3개이다. 최근에 float를 배우고 있기 때문에, float 속성을 이용하여 간단하게 아래의 상태로 만들었다. 접근성이란? 더보기 디자인ㆍ시스템공학ㆍ인간공학 등의 분야에서 주로 쓰이는 말로, 교통ㆍ..

Css 란? Css는 'cascading style sheets' 의 약자 더보기 - 네이버 지식백과 - Css는 웹 페이지에 "디자인"이라는 시각적 가치를 부여하기 위한 언어 HTML문서의 레이아웃과 스타일을 정의 W3C에서 표준안을 만들어 내고 있으며 1996년 Css1 이후 2.1를 거쳐 현재 Css3까지 보급 Css 연결하기 HTML에 Css 디자인 작업을 하는 방법은 External / Internal 두가지 (embed, inline 방법 등으로 나누기도 하는데 나는 이렇게 구분함) 1. External (외부파일 연결) 를 이용하여 연결 -..