개발 블로그

Semantic HTML 시맨틱 HTML은 페이지에 의미를 부여하는 것을 말함 현대표준, 웹사이트의 SEO(검색 엔진 최적화)가 향상되고 사람들이 웹사이트에 액세스할 수 있게함. (검색했을 때 상위에 랭크됨) Sectioning Elements = 단원 단원의 주제는 곧 제목이다. 따라서 아래의 sectioning elements들은 heading태그를 반드시 써야한다. section article nav aside 기본구조 : header/main/footer (논리적으로 완결된 집합체에 의미를 더 정확히 해줌) - not sectioning elements header : 문서의 도입부 또는 한 section의 도입부에 사용 / 뉘앙스를 나타낼 때 언제든지 사용가능 main : 본문에 있어 핵심이 되..

abbr(abbreviation) : 약어·약자를 설명, title 속성을 반드시 가지며 title="약자의 뜻" address : 주소출력 pre : 에디터에 쓴 대로 그대로 출력되게 할 때 code : 말그대로 코드를 나타낼 때, 변수 및 속성, 파일 이름과 같은 것을 출력함 *aria-label : 웹 접근성을 높인다. 프론트엔드 개발자의 중요한 역할 중 하나. 풍부한 정보를 제공. 스크린 리더 사용자를 위해 이 속성을 습관화 하자 우리 눈에 보이지 않더라도 브라우저에게는 전달이 되면 좋은 정보, 혹은 스크린 리더를 통해 웹을 사용하는 사용자들에게 전달해야 하는 정보를 제공하고 싶을 때 사용하는 게 aria-label 입니다!!

Form에 유효성검사 추가하기 속성 required : 필수입력 min : 최소값 지정하기(숫자) max : 최대값 지정하기(숫자) minlength : 최소 문자수 지정하기(텍스트) maxlength : 최대 문자수 지정하기(텍스트) pattern : 사용자 지정 유효성검사

: 사용자가 정보를 입력하여 제출할 수 있도록 함 속성 action : form을 어디로 보낼지 결정(필수속성!) / 해당 데이터를 처리할 웹 서버 URL method : form을 어떻게 보낼지 결정(필수속성!) / get or post ㄴ get : 해당 데이터를 숨김 없이 보냄(=엽서), 짧을 때 ㄴ post : 해당 데이터를 body에 숨겨서 보냄(=편지), 길 때 : 사용자가 정보를 입력하기 위한 필드를 추가/빈 요소 속성 type : 어떤 값을 입력할 것인지를 결정하는 속성 ㄴtext : 단일 행의 텍스트 입력 박스 ㄴpassword : 단일 행의 검열 텍스트 입력 박스 ㄴnumber : 단일 행의 숫자 입력 박스 ㄴemail : 이메일 박스 ㄴtel : 전화번호 박스 ㄴrange : 숫자의 ..

: 테이블 생성 : 테이블 제목 생성(구역 나누기) : 테이블 본문 작성(구역 나누기) : 바닥글 생성, 합계 등(구역 나누기) : 테이블 제목, table heading scope="row/col" 속성으로 행 또는 열의 제목 위치를 명확하게 한다. : 행 추가, table row : 데이터 추가, table data 속성 -rowspan="" : 행을 병합 -colspan="" : 열을 병합 행 을 기준으로 작성해야 쉬움! th도 tr 안에 위치해야 오류가 뜨지 않는다.

: 직접 화면에 표시되는 정보 강조할 때, : 줄바꿈 : 앵커태그, 하이퍼 링크의 역할. 내부나 외부페이지 또는 동일한 페이지의 내용에 연결하는데 사용. href 속성이 반드시 필요하고 URL이 들어가야 함. target="_blank" / target="_self" : 각각 새 탭에서 열기, 현재 탭에서 열기 : 단락 구분, block : 문단 안 단어를 구분할 때, Inline 그룹핑할 때만 쓰임 CSS에서 자주 쓰임 위 태그들은 딱히 의미가 있는 태그는 아님 리스트 : 순서 없는 목록 : 순서 있는 목록 속성 start : start="숫자"는 리스트 시작 번호 설정 type : type="문자"는 순서를 시작하는 문자를 설정 reversed : 순서를 거꾸로 지정/따로 설정하지 않고 키(key)만..

HTML=Hyper Text Markup Language, 웹을 구조화하는 기능, 웹의 뼈대 웹 브라우저에게 전달하고자 하는 정보를 그 성격에 맞게 마크업하는 것이 중요하다. : 브라우저에 html을 지정한다고 선언 : html 코드를 둘러싸는 태그 : 웹 페이지에 직접 표시되지 않는 페이지 정보 : 제목표시줄 : 어떤 것을 참조하거나 연결 / 웹 폰트는 .css 링크여야함 : html에 css를 표시할 때 사용 메타 데이터 : 위의 것 이외의 데이터를 표시할 때 =화면 사이즈를 디바이스 크기로 하고 배율을 1로 해라 (반응형 웹에 중요!) = 작성자를 나타낼 때 = 누군가 이 키워드 검색하면 결과로 띄워라 = 웹 페이지의 설명을 적는 곳 *name=메타 데이터 종류 *content=메타 데이터 값(na..