FE 스터디로 인프런의 [웹 퍼블리싱 실습] 강의 시리즈를 보고 있다! 사실 html&css를 정말 많이 사용해본 내 입장에서는 어떻게 보면 시간 낭비일 수 있지만 그동안 웹 표준을 고려해보면서 작성해본 적도 없고 너무 야매로 ... 쓰고 있던 것 같아서 기초를 다지자는 기분 + 동아리 내에 프론트 인원을 끌어모으기 위한 작전으로 스터디를 시작했다.
강의 자체는 사실 조금 길고 ... 루즈할 수 있지만 내가 놓치고 넘어갔던 부분도 많이 있는 것 같다. 특히 내가 그동안 디자인을 해놓고도 그냥 대강대강 눈대중으로 위에서부터 하나씩 만들었는데 이렇게 레이아웃을 쪼개면서 하니까 컴포넌트 개념으로 만들 때 더 도움이 될 것 같았다.
html 기본 틀 만들 때 사용하는 태그들 뜻
doctype -> 웹 문서로 유형 설정
<html lang="ko">로 브라우저 언어 설정
<meta charset="UTF-8"> 문서의 언어 ( 인코딩 ) 설정
다양한 메타 태그
<meta name="author" content="isdiscodead">
<meta name="generator" content="goorm-ide">
<!-- 검색했을 때 나오는 부분 -->
<meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
<!-- 검색 엔진 로봇에게 전해지는 정보 -->
<meta name="keywords" content="웹스토리보이, 웹표준, 웹 접근성, 사이트 만들기">@charset
@charset "utf-8"; -> style sheet의 한글이 깨지지 않도록 해줌
이 선언은 style 태그 내에서는 적용되지 않고 스타일 시트의 가장 첫 요소여야 함 !!
html에서 css를 불러올 때 사용하는 link 태그 내의 charset 속성은 HTML5에서 폐기되었으므로 반드시 이 선언을 이용해야 한다고 한다... 근데 나는 살면서 처음 봄 ... o0o ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
dothome FTP 서버로 작업하기
- dothome 가입, 로그인
- 파일질라( filezilla ) 설치
- 닷홈에서 웹 서버 FTP 아이디와 암호 생성
- 호스트 = 기본 주소, 사용자명 = FTP 아이디, 비밀번호 = FTP 암호 로 파일질라 접속
- /html 경로에 /web 디렉터리 만들기
- 브라켓에서 확장 기능 관리자 - Brackets Synapse 설치, 비밀번호 없이 서버 리스트에서 + 버튼 누르고 filezilla와 동일하게 추가, current directory는 /html ( 루트 디렉터리 )로 추가
-> 기본주소/web/index.html로 접근 가능
vscode의 경우에는 ftp-simple이라는 확장 프로그램으로 사용 가능한 것 같다!
스킵 메뉴 만들기
웹 접근성을 위해 탭을 눌러서 사이트의 어떤 영역으로 바로 갈 수 있는 메뉴
1. a 태그로 메뉴 만들어주기
<!-- 스킵 네비게이션 -->
<div id="skip">
<a href="#cont-nav">전체 메뉴 바로가기</a>
<a href="#cont-bam">배너 영역 바로가기</a>
<a href="#cont-cont">컨텐츠 영역 바로가기</a>
</div>- 숨겨져있다가 탭을 눌렀을 때 순서대로 보여질 수 있도록 스타일 적용
#skip {
position: relative;
}
#skip a {
position: absolute;
left: 0;
top: -35px;
border: 1px solid white;
color: white;
background: #333;
line-height: 30px;
width: 180px;
text-align: center;
font-size: 16px;
}
#skip a:active, #skip a:focus {
top: 0;
}이후는 실습 부분이라 크게 처음 보는 건 없었던 것 같당 후후 분량이 많으니 따라하기만 해도 꽤 걸리는구만 ... 😂
