내비게이션 메뉴 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼이다. 목록 태그 네비게이션 메뉴를 만들기 위해 주로 사용된다. 태그 설명 ul 순서가 없는 목록(unordered list) 생성 ol 순서가 있는 목록(ordered list) 생성 li 목록 요소(list item) 생성 과일과 채소는 ul 태그를 사용한 모습이다. 사과, 바나나, 오렌지 또는 상추, 치커리, 양배추는 ol 태그를 사용한 모습이다. [참고] HTML5 웹 프로그래밍 입문(3판)

로렘 입숨(Lorem Ipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트이다. 문서에서 텍스트가 보이면 사람들은 전체적인 프레젠테이션보다는 텍스트에 담긴 뜻에 집중하는 경향이 있어서 출판사들은 서체나 디자인을 보일 때는 프레젠테이션 자체에 초점을 맞추기 위해 로렘 입숨을 사용한다. 즉, 로렘 입숨은 디자인에 초점을 맞추기 위한 의미없는 글자이다. 나의 경우는 웹 페이지를 디자인할 때, 예시로 사용할 글자로 쓰려고 한다. 로렘 입숨을 쉽게 생성해주는 사이트가 있다. https://lipsum.com/ 해당 링크를 들어가면 다음과 같은 화면이 뜬다. paragraphs(문단), words(단어), bytes(글..

글자 태그는 웹 페이지에서 가장 큰 비중을 차지한다. 제목 글자 태그 문서의 제목을 표현할 때 사용한다. h는 heading(제목)을 의미한다. 태그 설명 h1 첫 번째로 큰 제목 글자 생성 h2 두 번째로 큰 제목 글자 생성 h3 세 번째로 큰 제목 글자 생성 h4 네 번째로 큰 제목 글자 생성 h5 다섯 번째로 큰 제목 글자 생성 h6 여섯 번째로 큰 제목 글자 생성 절대적인 글자 크기는 아니라서 동일한 태그여도 웹 브라우저의 종류가 다르면 글자 크기가 다를 수 있다. 한 웹 브라우저 내에서는 우선 순위에 따라 순차적으로 사용한다. 본문 글자 태그 p는 paragraph(단락), br은 break(줄 바꿈), hr은 horizontal rule(수평 줄)을 의미한다. 태그 설명 p 본문 문단 생성 b..

검사를 이용한 오류 확인 버그(bug) 프로그램이 원하지 않는 방향으로 동작하는 것 디버그(debug) 버그를 찾아내고 수정하는 행위 웹 브라우저 검사 기능으로 디버그 수행 웹 페이지에서 우클릭 후 [검사] 검사 단축키: [F12], [Ctrl]+[Shift]+[I] [Elements] 탭 현재 HTML 페이지의 계층 구조와 각 태그에 적용된 스타일을 파악할 때 사용 [Console] 탭 오류를 확인하거나 자바스크립트 코드를 추가로 입력할 때 사용 검사 기능을 통해 오류 발생 원인과 위치를 쉽게 파악할 수 있음 [참고] HTML5 웹 프로그래밍 입문(3판)

HTML5 페이지의 작성과 실행 1. 새 파일 만들기 [파일]-[새 파일] 단축키: Ctrl+N 2. 코드 작성 후 파일로 저장 HTML 페이지는 다음과 같은 샘플코드로 시작 Hello World! .html, .htm 형식으로 저장 cf) VSCode에서 html:5 입력 후 tab키를 누르면 html 기본 형태가 자동으로 생성됨 3. 실행 저장한 html 파일 경로 복사 후 크롬에 붙여넣기하여 웹 페이지 실행 경로 복사 단축키: ++C 스타일시트 작성과 실행 내부 스타일 (1개 파일 - .html) (HTML페이지 내부에서) style 태그를 사용해 스타일시트를 직접 입력하는 방법 스타일시트가 짧은 경우 사용 외부 스타일 (2개 파일 - .css, .html) 스타일시트를 별도의 파일로 생성 (HTM..

HTML5 구조의 예 : HTML5 문서 표기, 반드시 첫 행에 기입 : HTML 페이지 기본요소, 내부에 모든 태그 작성 : body태그에 필요한 스타일 시트, 자바스크립트 제공 : 웹 브라우저에 표시되는 제목 지정

요소(element) HTML 페이지를 구성하는 각 부품 (제목, 본문, 이미지 등) 태그(tag) 요소를 만들 때 사용하는 작성 방법 요소 생성 = 태그 생성 생성 방법에 따른 요소 구분 요소 구분 형태 예 내용을 가질 수 있는 요소 내용 Hello 프로그래밍 내용을 가질 수 없는 요소 내용을 가질 수 있는 요소 형태: 내용 ex) Hello, 프로그래밍, 시작태그 - 내용 - 끝 태그 순 내용에 들어가는 거: 텍스트, 다른 태그, 입력X 내용을 가질 수 없는 요소 형태: ex) , , cf) HTML 표기법과 XHTML 표기법HTML 표기법은 만으로 요소를 생성 -> 내용을 가질 수 있는 태그의 시작 태그인지 내용을 가질 수 없는 태그 전체인지 구분 어려움-> XHTML 표기법 사용 ( HTML: ,..

문제 링크 https://www.acmicpc.net/problem/2754 문제 어떤 사람의 C언어 성적이 주어졌을 때, 평점은 몇 점인지 출력하는 프로그램을 작성하시오. A+: 4.3, A0: 4.0, A-: 3.7 B+: 3.3, B0: 3.0, B-: 2.7 C+: 2.3, C0: 2.0, C-: 1.7 D+: 1.3, D0: 1.0, D-: 0.7 F: 0.0 풀이 딕셔너리를 이용해 풀었다. 딕셔너리는 사전처럼 2개의 요소를 하나로 묶어 표현한 자료형이다. 코드 dic = {'A+':'4.3', 'A0':'4.0', 'A-':'3.7', 'B+':'3.3', 'B0':'3.0', 'B-':'2.7', 'C+':'2.3', 'C0':'2.0', 'C-':'1.7', 'D+':'1.3', 'D0':..