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

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

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

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

Dispersion Brush / Smoke Brush Dispersion(분산) 효과가 나는 브러쉬를 이용하여 인물의 동작에 따른 역동적인 모습을 표현했다. 동적인 인물을 선택하다보니 스포츠를 하고 있는 인물의 모습을 선택했다. 배경효과는 인물의 의상색과 맞추었고 타이포의 방향은 시선의 움직임에 따라 이동되게끔 하였다. 축구를 하는 인물은 발차기로 인해 Dispersion Brush를 이용한 흩어짐 효과가 적절하다고 생각하였다. 가볍게 나는 듯한 인물은 Smoke Brush를 이용하여 공기의 흐름대로 은은함과 바람속에 있는 듯한 효과를 주고자했다.

Color 벤치마킹 1. 홀리카홀리카 https://www.holikaholika.co.kr/ 주조색 #b5a9e8 #8661de #623cb9 텍스트 색상 강조 #1a1a1a #1263c7 #e5648d #ff8c37 #FF4C42 일반 #4c4c4c 2. 희망브리지 https://www.relief.or.kr/ 주조색 #ef4223 텍스트 색상 강조 #ef4223 #6a615b #262728 일반 #333333 3. 파리바게트 https://www.paris.co.kr/ 주조색 #023586 텍스트 색상 강조 #111111(굵기와 크기로 강조) #0070c9 일반 #111111 4. 베네피트 https://www.benefitcosmetics.com/ko-kr 주조색 #f7dadf #fdb3c6 #f..

Dior 향수광고 리디자인 Smudge, Blur툴 활용 향수의 색감에 맞추어서 배경색을 넣었고 완전 디자인틱한 느낌보다는 자연스럽게 어우러지는 느낌을 추구했다.

1. 학습의 용이성 *헤라 https://www.hera.com/kr/ko/index.html 검색어 입력창 타이핑효과와 아래 #추천검색어 보기로 작성하여 누구나 쉽게 검색할 수 있으며 원하는 물품을 찾을 수 있는 예시를 주어줌 *vimeo https://vimeo.com 오른쪽 상단에 +아이콘과 Join아이콘을 강조하여 처음 회원가입을 하는 사람들에게 빠르게 회원가입 메뉴로 이동할 수 있도록 하며 더보기 메뉴라는 인식을 잘 살렸음 2. 사용의 효율성 *초록우산 어린이재단 https://www.childfund.or.kr 오른쪽 상단의 ‘후원하기, ‘기부금 영수증’ 버튼을 카테고리 목록에서 단일화하여 가장 많이 찾는 목록에 쉽고 빠르게 접근할 수 있도록 하였음 *쿠팡 https://login.coupan..