HTML
위니브 로그인페이지 클론코딩(멋쟁이사자처럼 지원과제)
URL: https://koreanhamster.github.io/weniv_login_page/ 소스코드: https://github.com/Koreanhamster/weniv_login_page 결과물 구현시 신경 쓴 점 웹 접근성 두번 째 로그인 페이지 - 보여지는 순서대로 마크업을 하면 스크린리더 상에서 아이디 입력으로 넘어가기 전에 닫기버튼이 나오기 때문에, 닫기버튼을 마크업 맨 마지막으로 배치하고 CSS를 통해 상단에 위치하게 함 소스 절약 각 회사 아이콘에 이미지 스프라이트 기법 사용 - 1장의 이미지만 사용함으로서 소스 및 로딩시간 절약 부딪혔던 문제점 1. 약간의 삽질 회원가입과 아이디/비밀번호찾기 사이에 있는 저 수직라인을 만들고 싶었다. 가상요소를 생성하여 라인을 만들어주려고 했는데,..
약방의 감초같은 image sprite기법으로 이모티콘 넣기
img 스프라이트 기법 여러 이미지들을 하나의 이미지로 만들어 background-position 속성으로 이미지 좌표 값을 이용하여 사용하는 기법 위의 로그인 리스트에서~ 구글, 페이스북, 네이버, 카카오 각각의 이미지들을 넣어준 게 아니라 1개의 이미지만 사용했다는 사실! 처음엔 컨셉이 헷갈릴 수 있으나, 아래 과정을 보면 생각보다 엄청 쉽다는 걸 알 수 있다. 왜 사용할까? 한장의 사진만으로 여러번 다른이미지들을 넣을 수 있으니까 당연히 소스절약 이는 로딩시간 단축으로 이어진다! (간단한 웹페이지는 별 차이 없겠지만, 네이버나 다음과 같은 한 페이지 안에 어마무시한 수의 이미지가 들어가는 사이트를 생각해보자..) 주의점 alt값이 들어가야 하는 의미가 있는 사진에는 적합하지 않다. 글의 악세사리처럼..
웹 접근성(Accessible HTML) - 큰 깨달음..!!!
flex에 한참 빠져있던 나. 팀원과 토의 중 아래와 같은 문제에 봉착했다. flex를 이용해서 뷰포트의 정 중앙에 로고이미지가 있고 같은 수평선 라인 오른쪽 끝에 버튼 하나 는 어떻게 구현할 수 있을까? 음... justify-content 속성을 center로 주고 버튼만 밀어낼 수는 없다. 왜냐면 로고가 아닌 저 두 컨텐츠의 사이가 center가 되니까. justify-end속성을 주고 마진을 이용해 로고이미지를 마진으로 밀어내는방법? 하지만 마진계산을 어떻게 하느냐에 따라 반응형 웹 구현에 방해받을 수 있다. 같은 수평선 안에서 로고나 텍스트를 정렬해야하는 상황은 항상 있고 그 때마다 난관에 봉착하지만 또 어찌어찌 하다보면 되서 되는대로 넘어가게 되는 이런 악순환을 끊기 위해 멘토님께 질문을 드렸..
배운 flex로 있어보이는 반응형 Nav 바 만들어보기
안녕! 배운건 직접 써먹어봐야 내 머릿속에 남습니다. 오늘은 있어보이는 반응형 Nav 바를 만들어볼거에요. 기본재료 준비 header 태그 안에 로고 이미지 ul 태그(3개의 네비게이션 링크들이 담긴) a태그(버튼이 담긴) 로 구성하고 아주 기본적인 스타일링을 해줄게요. >HTML Services Projexts About Contact >CSS * { box-sizing: border-box; margin: 0; padding: 0; background-color: #24252a; } li, a, button { font-family: "Montserrat"; font-weight: 500; font-size: 16px; color: #edf0f1; text-decoration: none; } .nav..
Flex 별 거 아냐 - 자식요소편
Flex 별 거 아냐 - 부모요소 편 이번에는 자식에게 할 수 있는 속성들에 대해 알아보겠다. 전제조건은 부모요소에 display:flex 속성이 적용되어있어야 한다. order 우리는 각각의 자식들에게 order속성, 즉 순서를 줌으로써 쉽게 위치를 바꿀 수 있다. 여기서 3번 박스를 가장 첫번째로 배치하려면 어떻게 해야 할 까? 정답은 3번 박스 스타일에 order: -1; 속성을 주면 된다. .three { width: 100px; height: 100px; background-color: blanchedalmond; order: -1; } 왜 1이 아닌 -1인가? 그 이유는 기본적으로 모든 박스의 order 속성이 ‘0’이기 때문이다. 때문에 원하는 박스를 맨 앞으로 보내주고 싶으면 -1, 맨 뒤..
HTML과 CSS로 감성달력 만들기.
URL https://koreanhamster.github.io/calendar/4:5/index.html 소스코드 https://github.com/Koreanhamster/calendar HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 9..