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

상단고정 투명 네비게이션 만들기 / visaul위에 올라오는 Navigation 최근에 웹에서 navigation 바 부분이 투명하게 visual위로 올라온 모습을 많이 볼수있다. 디자인 트렌드가 이렇다는데.. 기존에 네비게이션 자체가 영역을 차지하고 고정되어있는거보다 투명하게 올라왔다가 스크롤을 내리면 배경색이 채워지면서 스크롤을 따라 고정된채로 움직이는 것이 고급스럽고 유저가 페이지를 사용하는데 도움이 되기 때문이다. 그런데 이렇게 만들려면 visual 이미지자체가 어두우면서 글씨를 돋보이게 하는 이미지여야 할듯..? 어쨌든, 오늘은 이렇게 고정된 네비게이션바를 만드는 법을 알아보겠다. 메인 네비게이션 카카오 투자정보 서비스 소셜임팩트 고객지원인재영입 카카오는 새로운 연결을 통해 더 편리하고 즐거운 ..

::after, ::before 가상 선택자와 content 추가하여 태그에 border 만들기 홈페이지 네비게이션에서 태그사이에 보더가 있거나 태그 위에 보더가 있는 경우를 많이 봤었다. 보더 없이 일렬로 나열되는 것 보다는 장식적 요소를 줌으로써 사용자들에게 현재 사용하고 있는 카테고리를 정확히 보여주고 유저의 편리함과 접근성을 높이게 된다. 보더를 만드는 방법에는 여러가지가 있을 텐데 내가 시행착오를 겪었던 방식과 ::after,::before의 가상 선택자로 만드는 방법을 중점적으로 활용해보겠다. 먼저 가상선택자에 대해 알아보자면 이러한 html코드가 있을 때 간단한 style을 주면 이렇게 나올 것이다. 여기서 각각 ::before과 ::after을 적용하면 'start'라는 텍스트와 고양이 이..

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 속성을 이용하여 간단하게 아래의 상태로 만들었다. 접근성이란? 더보기 디자인ㆍ시스템공학ㆍ인간공학 등의 분야에서 주로 쓰이는 말로, 교통ㆍ..

Selector(선택자) "스타일을 적용하는 대상" p요소 = 선택자 기본선택자 선택자 기능설명 요소 특정 요소 선택 #id명 특정 id명을 가진 요소 선택 .class명 특정 class명을 가진 요소 선태 요소1 요소2 요소1안에 있는 모든 자손요소 요소2 부모요소1>자식요소2 부모요소1 안에 있는 자식요소2 형제요소1+형제요소2 형제요소1 옆에있는 형제요소2 선택1~선택2 선택1 기준 모든 선택2 요소 선택1, 선택2, 선택3 선택자 그룹선택 * 모든요소 선택 1. 타입선택자 요소명을 선택자로 사용 h1 {background-color:red;} ul {margin:0px;} 'h1'과 'ul'은 선택자 2. class 선택자(요소명 생략가능) 클래스 이름으로 선택하기, 문서내에서 여러요소를 한 번에..

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