Computer Science/HTML

[HTML] 13. HTML 마무리 체크리스트 (접근성 + 시맨틱 + 폼)

[HTML] 13. HTML 마무리 체크리스트 (접근성 + 시맨틱 + 폼)이번 글은 HTML을 “끝내는” 글입니다.태그를 많이 아는 것보다 중요한 건, 구조가 좋은 HTML을 작성하는 것입니다.특히 아래 3가지는 초보/실무를 가르는 기준이 됩니다.① 시맨틱 구조(문서 역할이 보이는가?)② 접근성(누구나 사용 가능한가?)③ 폼 작성(서버로 제대로 전송되는가?)1. 시맨틱 구조 체크리스트시맨틱 태그는 “디자인”이 아니라 “의미”입니다.화면은 비슷해도 문서 품질이 달라집니다.✅ 권장 구조...... ... ... ...❌ 자주 하는 실수상단메뉴본문하단div는 틀릴 건 없지만, 문서 의미가 사라집니다.가능하면 의미 있는 태그 → 애매한 부분만 div로 보완하는 방식이 좋습니다.2. 제목(h1~h..

2026. 2. 16. 22:24

Computer Science/HTML

[HTML] 12. HTML 한 페이지 완성 (종합 예제 )

[HTML] 12. HTML 한 페이지 완성 (종합 예제 )이번 글에서는 지금까지 배운 내용을 합쳐서HTML 한 페이지를 통째로 완성해봅니다.포인트는 “예쁘게 꾸미기”가 아니라구조가 명확한 문서를 만드는 것입니다.1. 종합 예제 목표시맨틱 구조(header/nav/main/section/article/aside/footer)목록(ul/li)로 메뉴 만들기링크(a), 이미지(img) 넣기표(table)로 데이터 표현폼(form)으로 입력 받기2. 전체 코드 (복붙 실행용)아래 코드를 그대로 새 파일로 저장해서 실행해보세요.예: index.html로 저장 → 더블클릭하면 브라우저에서 열립니다. My Study Page HTML 구조를 연습하는 종합 예제 페이지 공..

2026. 2. 16. 18:22

Computer Science/HTML

[HTML] 11. div, span 그리고 시맨틱 태그 완전 이해

[HTML] 11. div vs span + 시맨틱 태그까지 (Output 포함, 깊게)이번 글은 “레이아웃의 재료”를 정리하는 편입니다.많이 쓰는 div, span이 왜 존재하는지, 그리고 왜 요즘은 시맨틱 태그를 권장하는지까지화면 출력(Output)으로 직접 확인하면서 이해합니다.1. div란? (블록 요소, 영역 박스)div는 의미가 없는 “영역 박스”입니다.큰 틀(컨테이너)을 만들 때 가장 많이 씁니다.블록 요소라서 기본적으로 줄을 바꿉니다.가로 폭을 한 줄 전체(100%)로 쓰는 성향이 있습니다.구조를 “나누기” 위한 박스라서, CSS와 함께 진짜 힘을 발휘합니다.예제 코드 첫 번째 div 박스 두 번째 div 박스Output 첫 번째 div 박스 두 번째 div 박스출력을 보면 div는..

2026. 2. 7. 18:55

Computer Science/HTML

[HTML] 10. input 타입 완전 정리

[HTML] 10. input 타입 완전 정리input 태그는 form에서 가장 많이 사용되는 요소입니다.type 속성에 따라 완전히 다른 기능을 합니다.이번 글에서는 자주 쓰는 타입부터,실무에서 중요한 타입까지 모두 정리합니다.1. 기본 텍스트 입력① text한 줄 텍스트 입력② password입력 내용이 ●●● 로 표시2. HTML5 전용 입력 타입① email이메일 형식이 아니면 자동 검증 오류 발생② number③ date④ tel⑤ url이 타입들은 브라우저가 기본 유효성 검사를 제공합니다.3. 선택 관련 타입① checkbox 축구 농구여러 개 선택 가능② radio 남자 여자같은 name을 사용해야 하나만 선택됩니다.4. 버튼 관련 타입① submit② reset③ buttonbutton은 ..

2026. 2. 7. 18:55

Computer Science/HTML

[HTML] 09. form 태그 완전 정리 (사용자 입력의 시작)

[HTML] 09. form 태그 완전 정리 (사용자 입력의 시작)form은 사용자의 입력을 서버로 보내는 역할을 합니다.로그인, 회원가입, 검색창, 게시글 작성 등웹사이트의 거의 모든 상호작용은 form에서 시작합니다.1. form 기본 구조 입력 요소들action → 데이터를 보낼 주소method → 전송 방식 (GET / POST)2. method의 차이 (GET vs POST)① GETURL에 데이터가 노출됨검색 기능에 사용비밀번호 전송에 부적합② POST데이터가 URL에 보이지 않음회원가입, 로그인에 사용데이터 길이 제한이 적음실무에서는 보안이 필요한 경우 POST를 사용합니다.3. 기본 입력 예제 아이디: 비밀번호: Output 아이디: 비밀번호: 4. input 태그의 핵..

2026. 2. 7. 18:53

Computer Science/HTML

[HTML] 08. 표(table) 완전 정리

[HTML] 08. 표(table) 완전 정리표(table)는 데이터를 행(Row)과 열(Column) 구조로 표현할 때 사용합니다.엑셀처럼 생각하면 이해가 쉽습니다.주의할 점은 레이아웃용으로 사용하는 것이 아니라정말 데이터가 표 형태일 때 사용하는 것이 맞습니다.1. table 기본 구조 데이터 데이터 table → 표 전체tr → 행 (table row)td → 셀 (table data)2. 기본 예제 이름 나이 홍길동 25 Output 이름 나이 홍길동 25 3. 제목 셀 (th)th는 table header입니다.제목 셀을 만들 때 사용합니다. 이름 나이 홍길동 25 Output ..

2026. 2. 7. 18:52

Computer Science/HTML

[HTML] 07. 링크(a)와 이미지(img) 완전 정리

[HTML] 07. 링크(a)와 이미지(img) 완전 정리웹(Web)의 본질은 연결입니다.그 연결을 담당하는 태그가 바로 a 태그입니다.그리고 시각적인 정보를 전달하는 핵심 요소가 img 태그입니다.1. a 태그 (Anchor)a는 anchor(닻)라는 의미입니다.현재 문서를 다른 문서와 연결하는 역할을 합니다.기본 구조링크텍스트예제구글로 이동Output구글로 이동2. href 속성의 의미href는 Hypertext Reference의 약자입니다.절대경로 → https://example.com상대경로 → /about.html같은 페이지 내부 이동 → #section1내부 이동 예제맨 아래로 이동여기가 맨 아래3. target 속성링크를 새 창에서 열고 싶다면 target 속성을 사용합니다. 새 창에서 ..

2026. 2. 7. 18:50

Computer Science/HTML

[HTML] 06. 목록(List) 태그 완전 정리 (ul, ol, li)

[HTML] 06. 목록(List) 태그 완전 정리 (ul, ol, li)목록(List)은 웹페이지에서 매우 자주 사용됩니다.메뉴, 게시글 목록, 댓글 목록, 카테고리, 네비게이션 등거의 모든 구조가 목록 형태로 만들어집니다.이번 글에서는 단순 사용법이 아니라목록의 의미와 구조를 이해해보겠습니다.1. 순서 없는 목록 (ul)ul은 unordered list의 약자입니다.순서가 중요하지 않은 목록을 만들 때 사용합니다. 사과 바나나 포도Output 사과 바나나 포도기본적으로 ● 점이 붙습니다.2. 순서 있는 목록 (ol)ol은 ordered list입니다.순서가 중요한 목록에 사용합니다. 회원가입 로그인 주문하기Output 회원가입 로그인 주문하기기본적으로 1, 2, 3 숫자가 붙습니..

2026. 2. 7. 18:48