FE/HTML 12

앵커

1. (anchor 태그): 여러이름으로 불리니 궁굼한것은 검색을 통해 확인해보시길 바랍니다 2. href 속성: 링크를 만들기위해 앵커 태그안에는 href 속성을 가지고 있어야하고 속성의 값은 목적지가 되는 url입니다. ==> 런어 블로그 - 다른 추가적인 속성이 궁굼하다면? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a - 앵커태그는 무조건 외부페이지로 이동하는것은 아님. - 앵커태그를 통하여 내부페이지로 이동하고 싶다면 목적지 태그에 id값을 설정한 뒤에 내용 이렇게 만들면 된다.

FE/HTML 2020.11.23

리스트(ul, ol, dl)

1. ul(unordered list) : 순서가 없는 리스트 2. ol(ordered list) : 순서가 있는 리스트 3. dl(definition/description list) : 용어와 그에 대한 정의를 표현할때 사용 - 은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조 - : 용어를 나타내는 태그 - : 용어에 대한 정의 또는 설명을 나타내는 태그(용어 하나에 여러 정의가 들어갈 때, 를 한 개 이상 쓰는 것이 가능)

FE/HTML 2020.11.23

이미지

- 기본적인 형식 1. src속성: 의 필수속성으로 이미지의 경로를 나타내는 속성 2. alt속성: 이미지의 택스트를 나타내는 속성. 이미지를 대체하는 글을 뜻함. 반드시 들어가야하는 속성 3. width/height: 이미지의 가로와 세로의 크기를 나타내줌(보통 CSS를 통해서 해결함.) - 상대경로와 절대경로: src 속성에는 이미지의 경로가 들어가며, 이미지의 상대경로와 절대경로가 있습니다. 상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이고, 절대경로는 실제 그 이미지가 위치한 곳의 전체 경로입니다. - 이미지 파일형식: gif : 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식 jpg : 사진이나 일반적인 그림에 쓰이며 높은 압..

FE/HTML 2020.11.23

테이블

1. 테이블의 구성요소. - 각각의 칸을 셀이라고 부름. - 가로방향을 행 또는 row, 세로방향을 열 또는 column 2. 테이블을 나타내는 태그 - , : 셀을 표현해주는 태그 / 태그는 제목 셀을 나타낼때 사용. - : 셀들을 감싸주는 행 (table-row) - : 위 태그들을 전부 감싸주는 태그 3. 테이블 구조 관련 태그 - : 표의 제목/ 태그의 자식태그로서 가장 위에 선언 - : 제목 행을 그룹 - : 바닥 행을 그룹 - : 본문 행을 그룹 4. 테이블 관련 속성 - colspan: 셀을 가로방향으로 병합 - rowspan: 셀을 세로방향으로 병합 *테이블에 대해서 더 자세히 알고싶다면 : https://developer.mozilla.org/en-US/docs/Web/HTML/Eleme..

FE/HTML 2020.11.23

폼 요소1

1. 폼 요소란? 서버에 데이터를 전달하기 위한 요소. 2. 대표적인 폼 요소 2.(1) : 내용이 없는 빈요소, type 속성을 통하여 여러 종류의 입력 양식으로 나타내게 됨. - type = "text": 화면에 입력할수 있는 박스를 만듦 - placeholder=" 내용 " : input 안에 작성하면 박스안에 기존 박스에 글자내용을 입력하게됨. 외부에서 글자를 입력하게 될 경우 기존 글자는 사라짐. - type = "password": 화면에 입력할수있는 박스을 만들고 입력값을 치면 보이지는 않음. - type = "radio": 라디오를 만들때 사용/라디오 버트는 중복선택이 불가능 하며 하나의 항목만 선택가능 - name=" ": 라디오 버튼과 체크박스를 그룹화 시켜주는 속성 - checked:..

FE/HTML 2020.11.23

폼 요소3

1. : 폼 요소와 연결 시켜주기 위하믕로 웹 접근성 향상에 도움이 됨.(필수적!) - 모든 form 요소에 사용가능. - form 요소의 id 속성값과 의 for 속성값을 같게 적어줘야함 ==> 을 사용하면 클릭할 경우 해당 form 요소를 클릭한 것처럼 동작함. 2. : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용. : 폼 요소의 제목으로 요소 내부에 작성/ 요소의 가정먼저 자식 태그로 나와야함. 3. : 모든 form요소들을 감싸는 태그. 데이터를 묶어서 실제 서버에 전송해주느 역할을 함. 태그로 구조화 되어있으면 도 감싸는 역할을 함. 내가 원하는 값들만 묶어서 서버에 전송하기 위함. - action: 폼 데이터를 처리하기 위한 서버의 주소 - method: 데이터를 전송하는 방식..

FE/HTML 2020.11.23

시멘틱 마크업

1. 시멘틱 마크업. - 시멘틱이란? 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻함. - 마크업을 할때에는 의미에 맞는 요소를 사용, 문서의 구조화, 인간과 기계 모두 이해할 수 있는 것이 목표. ==> 화면 이용자 입장에서 봤을때는 두 비교 대상들의 차이점이 느껴지지 않지만 태그의 의미는 각각 다르므로 주의해서 작성해야한다. 2. BLOCK & INLINE - block level: 한줄에 하나의 요소 표시 - inline level: 한줄에 여러개의 요소표시 * block level 의 요소가 inline level의 자손으로 들어가는것을 허용하지 않음.(inline level 안에 block level을 넣을수가 없음)

FE/HTML 2020.11.23