뒷북 정리 (국비 교육)/html8 [html] step10. anchor step10. anchor a(anchor) element는 하이퍼링크, 책갈피, javascript 등을 수행할 때 사용한다. hello.html로 이동 daum으로 이동 naver로 이동 blah blah Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta alias odit rerum necessitatibus assumenda illum aliquam reprehenderit quo, harum sunt dolores, deleniti similique corrupti placeat quis sed? Neque, nam incidunt. 는 하이퍼링크, 책갈피, javascript 등의 수행 시 사용하는 요소이다. 그림에도 링크를 걸 수.. 2021. 12. 7. [html] step09. form step09. form 검색창. 로그인 양식 등등. 모두 form이다. form이란 무엇인가? 예를 들어 검색창에 입력한 정보는 어떻게 될까? server로 전송되고, 그에 해당하는 정보를 받아오게 된다. 즉, form은 server에 전송되는 양식이라는 것이다. 지금은 server가 없기 때문에 테스트는 할 수 없다. form element 작성하기 이메일 비밀번호 로그인 취소 과 은 세트이다. 의 id와 name 속성. 이들은 서로 같을 필요도 없지만 같을 필요도 없다고 했다. name은 server에서 필요한 값이다. 예를 들어 email, password로 로그인하면 server로 값을 전송한다. 이 server에서 값을 서로 구분하기 위한 것이 name이다. 의 for 속성이 가리키는 것은 in.. 2021. 12. 7. [html] step08. table step08. table 번호 이름 주소 1 김구라 노량진 2 해골 행신동 : 보다 두껍고 가운데 정렬. head의 의미일듯. : row : column line을 잘 맞춰서 작성해야 함. 안에 를 넣도록 정의된 것이다. border 속성을 넣을 수 있고, id를 부여할 수 있다. (모든 요소에는 id를 부여할 수 있다.) 하지만 이것은 약식이다. 회원 목록 상품명 현금 카드 합계 4,300원 800원 (...후략) 약식과는 구조적인 차이가 있다. 접근성이나 검색엔진에 최적화를 위해 정석으로 구성하는 것이 좋다고 한다. table의 title은 caption 안에 표기한다. colgroup column의 폭을 조절할 때 사용한다. 와 의 안에 , , 를 작성한다. : 중요한 정보를 바로 아래 으로 작성한.. 2021. 12. 7. [html] step05~07. ul / ol / dl step05. ul 순서 없는 목록 (unordered list) ul element 친구 목록입니다. 김구라 해골 원숭이 어떤 목록을 나타낼 때 문자열을 단순히 나열하는게 아니고 아래와 같이 구조화해서 나열해야 한다. 친구 목록입니다. 김구라 해골 원숭이 ul은 block element이고 top/bottom margin과 left padding을 가지고 있다. 하지만 표기는 margin-top/bottom, padding-left로 함. un-ordered list. 순서없는 나열이다. 중구난방으로 나열하는 것이 아닌 구조화를 통해서 나열해야한다. 검사를 해보면 ul은 block element이고 padding을 가진다. 기본 스타일을 css를 통해 변경할 수 있다. 동그란 점을 'disc'라고 한다.. 2021. 12. 7. [html] step03~04. block / inline element step03. block element div 요소는 문단을 나타낼 때 사용합니다 div 요소는 주로 다른 요소를 포함하는 용도로 사용합니다. 문단3문단4문단5 block element는 위에서 아래로 쌓인다. cf) 좌우는 inline element. web page에서 우클릭 -> 검사를 하면 style tab의 margin, border, padding 등 요소가 차지하는 실제 공간을 확인할 수 있다. 이곳에서 숫자를 임의로 부여하며 임시 테스트가 가능하다. console tab은 javascript 영역이다. 실제 javascript 실행 환경으로, 이곳에 입력하고 엔터를 치는 순간 바로 해석해서 현재 보고 있는 page에 적용시킨다. 때문에 따로 tag가 필요하지 않다. 대제목 중제목 소제목 h.. 2021. 12. 7. [html] step02. img step02. img (...전략) Step02_img.html 이미지입니다. web browser에 이미지 표시하기 도 '단독 요소'. img를 작성하고 tab을 치면 src와 alt 요소가 등장한다. src에는 이미지의 경로를 작성한다. alt는 alternative. 즉, 대체하는 요소이다. 이것이 왜 필요할까? 그것은 시각장애인의 사용 접근성 때문이다. 시각 장애인의 경우, 인터넷을 사용하면서 웹사이트를 눈으로 확인할 수 없다. 때문에 그림을 확인할 수 없어서 시각 장애인은 웹사이트에서의 사진에 대한 정보를 alt에 해당하는 설명으로 대신 얻게 된다. 따라서 alt에 들어가는 이미지 설명에 대한 정보는 조심스러워야 한다. 공부할 때는 생략하지만 실제로 front-end를 주력으로 한다면 web 접.. 2021. 12. 7. 이전 1 2 다음
