HTML 썸네일형 리스트형 모든 Tag에서 사용가능한 전역속성에 대해 알아보자! 1. class 속성과 id 속성! class 속성은 태그의 별칭을 지정해줘서 css 나 javascript 에서 활용하기 용이하게 해 준다. id 속성은 class 속성과 비슷하나 문서 내 고유해야 하므로 같은 id 값은 두 개 이상 존재해선 안된다. 2. style 태그에 직접적으로 적용할 css를 선언해준다. 3. title 속성! 태그의 정보나 설명을 지정해줄 수 있다. 태그에 마우스를 올리고 있을 시 하단에 나오는 정보 4. tabindex Tap 키를 사용했을 때 요소를 순차적으로 탐색할 순서를 지정해준다. 대화형 콘텐츠(input , button, textarea 등...) 들에는 기본적으로 tabindex 가 0으로 설정되어있다 값으로 -1 을 입력하면 탭 순서에서 제외가 가능하다! 더보기 html의 양식을 만드는 Tag 들 ! 1. 태그는 웹 서버에 정보를 제출하기 위해 필요한 여러 양식의 범위를 지정한다. 태그 내부에는 또 다른 태그가 들어갈 수 없다. 태그의 속성 action 속성은 값으로 전송한 정보를 처리할 웹페이지의 경로를 입력해준다. autocomplete 속성은 이전에 양식에 입력한 값으로 자동 완성 기능을 사용할 것 인지 아닌지 정해준다 값으로는 on/off 기본 값은 on 이다. method 속성은 서버로 전송할 HTTP 방식을 설정해준다. 값으로는 GET과 POST 가 있으며 기본값은 GET이다. GET 방식은 입력한 정보가 URL 주소에 담겨서 전송됨. POST 방식은 입력한 정보가 URL 주소에 노출되진 않는다. 일반적으로 많이 사용된다. name 속성은 전송될 양식이 어떤 것인지를 값으로 입력해 줄 수 .. 더보기 웹을 더욱 풍성하게 해줄 멀티미디어 관련 Tag 들 ! 1. 태그는 이미지를 삽입할 수 있게 해주는 태그이며 빈 태그이다. 필수 속성으로는 삽입하려는 이미지의 경로를 지정해주는 src 속성과 이미지가 제대로 출력이 되지 않는 상활일 때에 대체 텍스트를 띄워주는 alt 속성이 있다. 이외의 속성으로는 이미지의 넓이를 설정 할 수 있는 width와 height 속성이 있으며 둘중 하나의 속성에만 값을 주어도 이미지가 기본비율에 맞게 변화한다. 그리고 srcset 속성은 뷰포트의 크기가 변화했을 때 변화된 크기에 최적화된 이미지를 사용하도록 값으로 사용될 이미지들의 경로와 이미지의 원본크기를 지정해주고 작은 크기의 이미지부터 입력하며 이미지의 크기는 px 단위가 아닌 w(가로너비) 나 x(비율을 의미하지만 일반적으로 w를 많이 사용함) 단위로 입력해야 한다. 작은.. 더보기 link를 걸어주는 <a></a> 태그에 대해서 알아보자 ! 태그는 다른 페이지라던가 같은 페이지의 어느 지정된 부분, 파일 , 이메일, 전화번호 등 다른 곳으로 연결해주는 하이퍼링크를 설정할 수 있다. 태그의 중요한 속성으로는 href(hypertext reference) 속성 값으로는 이동할 곳의 link를 연결해주면 된다. taget 속성은 링크 된 페이지를 현재 창에 띄울지 아니면 새 창을 열 것인지를 결정한다 속성값으로는 새창을 여는 _blank 현재페이지에서 바로 넘어가는 _self 가 있다. 기본값은 _self 다. 이외에 download , hreflang , rel , type 속성이 있다. 태그는 inline 요소이지만 버튼 형태의 모습으로도 많이 쓰이며 버튼 형태로 쓰일 때에는 display 값을 block 으로 바꿔서 사용된다. 더보기 목록이나 표를 만드는 Tag 들 ! 1. , , 태그는 orderlist로 순서가 있는 목록을 작성할 때 사용한다. 태그는 unorderlist로 순서가 없는 목록을 작성할때 사용한다. 태그와 태그는 자식으로 태그를 가진다. 태그는 단독으로 사용할 수 없고 부모 요소로 , 태그가 와야 한다. 태그 안에 , 태그가 또 들어갈 수 있다. 2. 태그는 표를 만들 때 표의 영역을 설정하기 위해 사용된다. 태그에 css로 border-collapse: collapse; 라고 작성하면 표의 행과 칸의 사이사이의 여백을 제거해줄 수 있다. 3. 태그 안에 작성하며 표의 행을 설정할 때 사용된다. 태그의 개수가 그 표의 행의 개수를 의미한다. 4. , , 태그는 태그 안에 작성하며, , 태그 모두 표의 칸을 만들어 준다. 표를 작성했을 때 머리에 해당하.. 더보기 html을 시멘틱하게 작성하기 위한 Tag들! 1. 일반적으로 문서의 제일 윗부분을 정의할 때 사용된다. header 태그안에 header와 footer를 자식 요소로 넣으면 안 된다. 2. 일반적으로 문서의 제일 하단부분을 정의할 때 사용된다. footer 태그안에 header와 footer를 자식 요소로 넣으면 안 된다. 3. ~ 총 6단계의 문서 제목을 표현한다. 숫자가 커질수록 작은 주제 ! 숫자가 작을수록 font-size 가 크지만 font-size를 조절하기 위해서 사용해서는 안된다! 태그를 사용했으면 바로 이런 식으로 중간을 뛰어넘지 말고 을 사용했으면 다음으로는 다음으로는 이런 식으로 사용한다. 4. 문서의 핵심 주제에 직접적으로 연관돼있는 콘텐츠들을 구성할 때 사용된다. 문서에 하나만 존재해야 한다. ie를 지원하지 하지 않아서 잘.. 더보기 Block 요소와 Inline 요소 ! 1. block 요소의 특징 사용 가능한 최대 가로너비를 사용함! 크기를 지정할 수 있다. 기본 값은 width: auto , height: auto 지만 block 요소는 width : 100% , height: 0으로 시작! 요소가 수직으로 쌓인다. margin, padding 값을 위 아래 좌우 모두 사용 가능하다. 레이아웃을 잡는 용도로 많이 쓰인다. 2. inline 요소의 특징 content를 표기하기 위해 필요한 만큼의 너비만 사용함! 크기를 지정할 수 없다. (width 값과 height 값을 줘도 반응이 없음) 기본값은 width: auto , height: auto 지만 inline 요소는 width : 0 , height: 0으로 시작! 요소가 수평으로 쌓인다. 줄 바꿈을 해서 작성하.. 더보기 이전 1 다음