오늘 오전에는 저번에 HTML&CSS로 작성한 사전과제 피드백을 받았다. 과제는 웹 표준과 웹 접근성을 준수하여 Figma에 디자인된 쿠팡 로그인 사이트 만들기였다.
우선 README.md에 관한 피드백이었는데 자세하게 쓰려고 노력한 것은 좋지만 다른사람들이 한눈에 보았을 때, 알기 쉽고 명확하게 쓰는게 좋으므로 코드를 일일히 다 넣는 것 보다 중요한 부분을 선택하여 그 부분만 README에 작성하는 것이 좋다고 하셨다.
그 다음으로 HTML에 관한 피드백을 주셨다. HTML과 관련해서는 우선 헤드태그를 제외하고 바디태그에 요소들을 보면서 진행하였는데 우선 문서의 제목과 관련한 피드백이었다. 처음 header
를 작성하고 logo를 넣었는데 그렇게 하게되면 마크업 언어로만 보았을 때, 문서의 제목이 무엇인지 알 수 없고, 그렇게 되면 웹 접근성이 떨어지기 때문에 h1태그를 사용하여 문서가 어떤 정보를 내포하고 있는 지 알려주는 시멘틱한 태그를 사용해야한다고 하셨다. 두 번째로는 main
태그의 form
태그와 관련하여 안에 관련이 있는 정보들 끼리는 fieldset
을 사용하여 묶어주는 것이 더 아름다운 마크업 언어를 만드는데 도움이 될 것이라고 하셨다. 또한 input
안의 이메일 이미지와 같은 것들이 단순하게 이미지를 표현하기 위해 있는 것이 아니라 그 부분을 클릭하였을 시, 바로 focus
가 input요소로 갈 수 있도록 하는 그러한 역할도 실제 쿠팡 로그인 사이트에선 볼 수 있었는데 그 부분을 고려해서 반영해야 겠다는 생각이 들었다(label
속성을 이용하여 구현). 로그인의 버튼부분에 있어서는 button
태그를 사용하는 것이 옳지만, 회원가입의 경우 어디 다른 페이지로 이동하는 경우 UI상으로는 비슷해 여서 버튼을 사용할 수 있지만, button
이 아닌 a
태그를 사용하는것이 이러한 맥락에선 맞다고 하셨다. 이렇게 HTML피드백이 끝나고 CSS로 넘어갔다.
CSS에서는 크게 별다른 말씀을 하진 않으셨고, CSS선택자를 설정할 때, >
을 사용하여 자식요소를 선택하기 보다는 클래스명을 사용하여 확장성을 높이는 코드를 사용하는 것이 더 좋다고 하셨다. 또한 outline: none
속성에 대해서 말씀을 하셨는데 이 부분은 수업시간에 진행을 하신다고 하셨다. 그 후로 리드미에 작성해둔 질문사항을 답변받고 끝났다.
평소 HTML과 CSS를 작성하면서 그 디자인에 맞추기 위해 별 다른 생각없이 코드만 작성하였던 것 같은데 웹 접근성에 관점과 실제 현업에서는 어떤식으로 작성하는 것이 좋은 지에 대해 전문적인 피드백을 받으니 내가 알고있던 HTML CSS가 단순히 쉬운것만은 아니라는 생각이 들었다. 그동안 이 언어들을 쉽게 생각하던 나를 반성하며 앞으로 HTML&CSS를 다룰 때, 피드백 받은 부분들 까지 고려하여 코딩하는 습관을 들여야겠다.
/* 숨김 콘텐츠 */
.a11y-hidden{
background-color: yellow;
/* 접근성 관점에서 display:none은 문제를 발생시킬 수 있음 */
display: none;
}
다음과 같이 바꾸어줌
/* 숨김 콘텐츠 */
.a11y-hidden{
background-color: yellow;
/* 접근성 관점에서 display:none은 문제를 발생시킬 수 있음 */
position: absolute;
top: -9999em;
}
이렇게 작성을 하면 화면에 보이지 않으면서 존재하게 만들 수 있음. 이 방법은 접근성에 문제는 없지만 음수값 설정으로 위치 값이 변경되어 스크롤이 자동으로 상단으로 이동하게 되고 스크린리더가 읽고 있는 화면이 사라지게 된다.
.a11y-hidden{
background-color: red;
/* 접근성 관점에서 display:none은 문제를 발생시킬 수 있음 */
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
clip-path: polygon(0 0, 0 0, 0 0);
/* clip: rect(0, 0, 0, 0); */
/* clip-path: inset(50%); */
overflow: hidden;
}
이렇게 바꾸어 주면 완성. 최소한의 크기 1px를 줌(0px을 주지 않는 이유는 스크린 리더기의 가상 커서가 돌아다녀서? 라고함)
네거티브 마진에 대해서 알아보기, clip-path에 대해서 알아보기
일반margin-left
로 값을 주면 단순히 마진 공간이 줄어들기 때문에 원하는 ui를 만들 수 없음
clip-path
clip-path --> 점을 이용해 면을 만드는 방식 (눈속임 패턴방식)
clip-path를 지원하지 않는 경우clip: rect(0, 0, 0, 0);
속성 사용!
이러한 방식들이 utility 클래스!
참고 사이트: 접근 가능한 숨김 텍스트
ex) 항공사의 웹 접근성 사례에 대한 이야기(대한항공 --> aria잘 지킨 사이트)
패딩을 주었을 때 화면상의 ui가 약간 어긋나서 다음과 같이 수정을 해줌
/* 안내 링크 */
.member-service {
/* display: flex; */
/* justify-content: flex-end;
column-gap: 10px; */
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
line-height: 0;
text-align: right;
padding: 2px 0;
background-color: pink;
/* 네거티브 마진의 동작원래 */
/* margin-right: -10px; */
position: relative;
right: -10px;
}
왜 마진 네거티브로 해결하였는 지 생각해보기
메인 메뉴의 레이아웃을 잡을때 수평정렬을 하면서 그 하위요소들을 어떻게 처리할 것인지? --> postion: absolute
로 해결!
헤더 부분의 공간 해결 방법 --> 트릭을 사용하는 방법
.header {
background-color: #fff;
position: relative;
border-radius: 0 0 15px 15px;
padding: 0 30px;
border-bottom: 1px solid red;
}
.menu {
background-color: orange;
margin: 0;
padding-left: 0;
list-style-type: none;
/* 크기가 변동될 가능성이 없는 콘텐츠의 경우 다음과 같이 고정값을 줌 */
height: 47px;
/* 마진은 장벽이 없으면 투명해져서 안보이게 되는데 header에 border-bottom에 값을 주어 트릭을 주어 해결하는 방법도 있음(좋은 방법론은 아님) */
margin-bottom: 50px;
}
좋은 해결방법은 아니므로 부모의 navigation
부분에 padding-bottom:50px
을 줌
.navigation {
padding-bottom: 50px;
}
메뉴 아이템 정렬
/* ie6에선 float와 margin의 방향이 같은경우 double로 계산됨(225px -> 450px) */
.menu .menu-item:first-child {
margin-left: 225px;
}
따라서 다음과 같은 방법도 있음 (menu에 padding-left:225px
)을 줌
/* 메인메뉴 */
.menu {
background-color: orange;
margin: 0;
padding-left: 225px;
list-style-type: none;
/* 크기가 변동될 가능성이 없는 콘텐츠의 경우 다음과 같이 고정값을 줌 */
height: 47px;
}
a태그와 button태그의 다른 box-sizing 기본값
a태그 --> box-sizing 기본값: content-box
button태그 --> box-sizing 기본값: border-box
메뉴 위의 선을 만들기 위해 사용하는 방법
border
로 박스에 주면 크기에 영향을 받아서 box-shadow
속성을 활용하면 크기에 영향을 미치지 않고 만들 수 있음
밑의 선을 만들기 위해 사용하는 방법
이 속성을 이용하여 만들게 되면 ie6부터 적용이 안되어서 크로스 브라우징에 어긋남 따라서 다른 방법을 사용하는 것이 필요!
text-decoration: underline #000;
text-underline-offset: 15px;
.is-active .menu-button::after {
content: "";
display: block;
background: #000;
height: 2px;
}
다음과 같이 after 가상요소 선택자를 사용하여 바꾸면 크로스 브라우징에서도 작동하여 웹 접근성을 높일 수 있음
메인 메뉴의 그라디언트 색상
그라디언트 색상을 지정하는데 도와주는 사이트가 있음
Ultimate CSS Gradient Generator
요소 선택자의 위험성
요소 선택자 위험성
/* .menu-item {
float: left;
} */
/* 요소 선택자의 위험성 */
.menu li {
float: left;
}
다음과 같이 요소 선택자를 이용해
float:left
를 사용하게 되면 ui의 변경이 일어날 시, 그 부분이 전체적으로 다 바뀌기 때문에 일반적으로는 클래스명을 사용하여 css선택자를 사용하는 것이 더 좋다.
메뉴 아이템들의 위치
.menu-item {
float: left;
position: relative;
}
.sub-menu {
position: absolute;
top: 47px;
display: none;
margin: 0;
padding-left: 0;
list-style: none;
/* 서브 메뉴들이 한 줄로 표현되게 하기 위해 이 속성을 사용! */
white-space: nowrap;
}
.menu-html, .menu-css, .menu-standards {
left: 0;
}
.menu-accessibility, .menu-qna, .menu-archive {
right: 0;
}
메뉴 아이템 아래의 아이콘
아이콘 사이트: fontello 사용
사용자 접근성 관련 사이트: NULI <-- 가끔가다 참고하면 좋다고 하심
.visual::before, .visual::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
animation: fadeEffect 2000ms infinite alternate;
}
.visual::before {
background-image: url("./images/ani_flower_01.png"), url("./images/ani_flower_02.png");
background-position: 0 -10px, 670px 0;
}
.visual::after {
background-image: url("./images/ani_flower_03.png"), url("./images/ani_flower_04.png");
background-position: 300px 0, 800px 0;
animation-delay: 1000ms;
}
배경은 먼저 선언한 것이 위로 올라옴!
배경의 포지션이 퍼센트로 정할때와 픽셀로 정할때의 차이를 알아야함 단순히 50%이면 가운데 정렬이지만 30px 40px과 30% 40%의 작동방식이 다름 30px, 40px는 그 위치에서부터 그림이 시작이지만 퍼센트는 넣으려는 이미지까지 고려하여 포함되게 작동
애니메이션 글자 시나리오
애니메이션 가제: moveEffect
.visual-text {
animation-name: moveEffect;
animation-duration: 1000ms;
/* fill mode가 기본으로 backwards로 되어있어서 원래대로 돌아감 --> forward사용! */
animation-fill-mode: forwards;
}
@keyframes moveEffect {
0% {
font-size: 12px;
color: rgba(0, 0, 0, 0);
padding: 0;
}
100% {
font-size: 24px;
color: rgba(0,0,0,1);
padding: 75px 0 0 400px;
}
}
padding을 쓰게되면 문제점 발생 --> css reflow (성능과 관련)
padding과 margin은 reflow를 많이 발생시켜서 성능 상 저하가 발생
.visual {
background-color: #fff1e6;
height: 120px;
position: relative;
}
.visual-text {
animation-name: moveEffect;
animation-duration: 3000ms;
/* fill mode가 기본으로 backwards로 되어있어서 원래대로 돌아감 --> forward사용! */
animation-fill-mode: forwards;
margin: 0;
position:absolute;
background-color: lightgreen;
}
position또한 성능 저하 발생 (absolute, relative둘다)
@keyframes moveEffect {
0% {
font-size: 12px;
color: rgba(0, 0, 0, 0);
transform: translate(0, 0);
}
100% {
font-size: 24px;
color: rgba(0,0,0,1);
transform: translate(400px, 75px);
}
}
position relative처럼 작동(범위를 넓게 잡으면서)
translate
속성은 css reflow를 발생시키지 않음
.visual-text선택자에
/* 이렇게 작성해야 정상적으로 콘텐츠 크기만큼 범위를 잡음 */
display: inline-block;
꽃애니메이션을 만들기(before 와 after 사용)
@keyframes fadeEffect {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.visual::before, .visual::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
animation: fadeEffect 2000ms infinite alternate;
}