본문 바로가기

HTML2

웹사이트 만들기/CardType 03 사이트 만들기 _ 카드 유형03 사이트 만들기 세번째 시간입니다. 오늘은 카드유형 중 세번째 유형입니다. 기존 텍스트 형태 밑에 프로필아이콘과 간단한 텍스트들이 추가 되었네요! 웹 표준을 준수해서 사이트를 만들어 봅시다. 시멘틱 태그를 사용한 이후엔 h태그가 필수적으로 와야 하는데요. 그래서 html소스의 이후에 h태그를 사용했습니다. 하지만 저희는 이 h태그를 보여주면 안되겠죠? 그래서 이번엔 이 h태그에 class="blind"를 부여해서 blind라는 css속성을 사용해보겠습니다. 그리고, footer부분의 배치가 애매하죠? 저도 어려워요...😥 오른쪽부터 배치될 수 있게 하기 위해 새로운 justify-content 속성인 flex-end를 사용해봐요. justify-content: flex-en.. 2022. 8. 10.
웹사이트 만들기/CardType 01 사이트 만들기 _ 카드 유형01 사이트 만들기 첫번째 시간입니다. 사이의 구성 유형은 메뉴 유형, 배너 유형, 이미지 유형 기타 등등 많은 유형이 있습니다. 그 중 카드 유형에 대해 공부해보겠습니다. 카드 유형 중 기본이 되는 유형입니다. 아래 피그마를 참조하여 똑같이 만들고 웹표준 기준도 준수해봅시다. 보통 wrap의 width 값을 1200px으로 부여했지만, 이번 사이트-카드유형은 양쪽에 살짝식 여백이 있으므로 1160px로 작업합니다. 레이아웃 배치 속성은 'display:flex'를 사용하여 작업하겠습니다. aria-hidden="true" 웹표준을 준수하기 위해 aria-hidden="true"을 사용하였습니다. 청각장애인들이 사이트를 이용할때는 스크린리더를 통해 사이트를 이용하는데요. 위 사.. 2022. 8. 8.
반응형

HTML이미지
HTML이미지

JAVASCRIPT

자세히 보기
HTML이미지