공부흔적

본문 바로가기

HTML

HTML태그 - 시멘틱 태그 HTML 태그 - 시멘틱 태그 Header Navigation Sidebar Content Footer 실행결과 일단 html 속성만 확인하기위해서 css부분은 css공부할 때 다시 한번더 언급해서 설명해드릴꼐요ㅎㅎ 우선은 css보다는 html 틀을 확인만 하는 소스로만 참고해주세요 ▼ 소스코드 살펴보기 herder 태그 : 문서의 헤더를 설정 (보통 로고, 제목, 검색 등을 포함) nav 태그: 콘텐츠를 담고 있는 문서를 사이트 간에 서로 연결하는 역할을 담당 (메뉴, 목차, 색인 등을 설정) aside 태그 : 사이드바라고 불리며, 본문 이외의 내용을 담고 있는 태그 (페이지 왼쪽이나 오른쪽에 메뉴, 배너 등의 콘텐츠) article 태그 : 독립적으로 구분되거나 재사용 가능한 영역을 설정 foote.. 2020.10.02
HTML태그 - 입력양식태그 HTML 태그 - 입력 양식 태그 URL 주소 입력 ▼ 소스코드 살펴보기 form 요소 : 사용자가 키보드나 마우스로 입력한 내용을 받아들이는 HTML 폼을 생성하는 요소→ action 속성 : 폼을 전송할 URL을 지정 action = "http://validator.w3.org/check" (W3C 검증기) → W3C의 웹페이지로 이동하는데 입력한 값이 해당 페이지에 전송하여 우리의 마크업을 검증 → method 속성 : 폼에 전송할 방식을 지정 - GET방식 : 전송을 하게 되면 서버가 URL을 통해서 값을 받는 방식 - POST방식 : 전송을 하게 되면 서버에 값을 URL이 아닌 숨겨져서 보내지는 방식 input 요소 : 텍스트 입력뿐만 아니라 전송 버튼, 라디오 버튼, 체크박스 등 여러가지로 표.. 2020.09.17
HTML 태그 - 표 태그 HTML 태그 - 표 태그 이름 나이 점수 짱구 5세 50점 코난 25세 88점 실행결과 위의 코드의 실행결과는 왼쪽사진이다. 오른쪽사진에는 border 속성을 추가한 실행결과이다. 하지만 table border 속성은 html5에서는 없다. ▼ 소스코드 살펴보기 table 요소 : 표를 표현 thead 요소 : 제목 행들의 묶음(필요 없는 경우에는 생략 가능) → table요소에서 한 번만 쓸 수 있다. → tbody 나 tfoot보다 먼저 선언되어야 한다. tr 요소 : 표의 행(table row)을 표현 th 요소 : 제목 셀(table header)을 표현 → th요소는 가운데 정렬과 굵게 표현된다 tbody 요소 : 본문 행들의 묶음(테이블의 필수 요소) → 여러 번 선언되어 행을 그룹화할 수 .. 2020.09.15
HTML 태그 - 목록태그 HTML 태그 - 목록 태그 1. ol태그 순서가 있는(정렬된) 목록 ol은 li만 자식으로 포함 가능 li의 태그는 종료 태그를 넣지 않아도 무관 li요소는 자동으로 줄 바꿈 블록방식의 태그 Orderd List Facebook Instagram Twitter 실행결과 2. ul태그 순서가 없는(정렬되지 않은) 목록 ul은 li만 자식으로 포함 가능 li의 태그는 종료 태그를 넣지 않아도 무관 li요소는 자동으로 줄 바꿈 블록방식의 태그 Unordered List Google Naver Daum 실행결과 3. dl태그 정의 목록 dl은 자식으로 dd, dt만 포함 가능 dt : 제목, dd : 정의 부분 키(key)/값(value) 형태를 표현할 때 유용 블록방식의 태그 Definition List H.. 2020.09.15
HTML 태그 - 앵커태그, 글자 형태 관련 태그 HTML 태그 - 앵커 태그(a) 인라인 방식 태그 페이지 이동할 수 있는 하이퍼링크 설정 텍스트나 이미지 오브젝트에 설정 가능 다음 네이버 구글 Top 제목으로 이동 TITLE ▼ 소스코드 살펴보기 2행~4행 : href 속성에 가고자 하는 url을 설정 target 속성을 이용하여 브라우저를 어떻게 실행시킬지 지정 target속성 값 1. _self : 현재 페이지 (기본값) 2. _blank : 새로운 탭 3. _parent : 부모 페이지로, iframe 등이 사용된 환경에서 쓰임 4. _top : 최상위 페이지로, iframe 등이 사용된 환경에서 쓰임 6행 : href 속성에 #을 넣으면 최상단으로 이동 (스크롤이 길 경우 맨 위로 올라가는 버튼을 만들 때 많이 사용) 7행 : href 속성에.. 2020.09.13

CSS

Design

portfolio

DAILY UI

티스토리툴바