[HTML/CSS] - 사전과제 피드백 및 실습

✅ 사전과제 피드백

오늘 오전에는 저번에 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를 다룰 때, 피드백 받은 부분들 까지 고려하여 코딩하는 습관을 들여야겠다.

💡 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 배경 CSS

.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;
}

---

📚 공부할 키워드

• 마진 네거티브
• 접근 가능한 숨김
• 점진적 향상
• white space