본문 바로가기

분류 전체보기97

[HTML] 목록 만들기 (<ul>, <ol>, <li>) 1. 목록 태그 (, , ) ① 목록의 정의 ② ③ (1). type 속성 (2). reversed 속성 (3). start 속성 ④ 2. 마치며 1. 목록 태그 (, , ) ① 목록의 정의 목록이란 "연관 있는 항목들을 순서대로 나열한 것"을 말한다. HTML에서도 목록, List를 웹 페이지에 출력하고 싶은 경우 요소를 통해서 표현하고 싶은 콘텐츠, 텍스트를 목록의 형태로 표시할 수 있다. 그리고 이러한 목록도 순서 없이 표시하거나 혹은 순서대로 표시할 수도 있다. 순서가 없는 목록(Unordered List)은 , 순서가 있는 목록(Ordered List)은 요소를 통해서 표현할 수 있다. 아래는 , 요소를 통해서 목록을 표시한 예시이다. HTML 삽입 미리보기할 수 없는 소스 , , 태그 모두 블.. 2023. 4. 1.
[HTML] <a> 요소 1. 태그 ① 태그의 정의 - a => anchor의 약어, '닻', '정박지'라는 의미를 가지고 있다. - 같은 문서 내에서 혹은 다른 문서로의 이동을 위해서 사용되는 태그로 인라인 요소를 만드는 인라인 태그이다. - 'href' 속성을 통해서 문서 내의 특정 위치, 파일, 이메일 주소 등 다른 URL로 연결된 하이퍼 링크를 만들 수 있다. 하이퍼 링크(Hyperlink) 클릭하면 현재 문서 내에서 특정 부분으로 이동하거나 혹은 다른 문서로 이동할 수 있는 수단 줄여서 '링크'라고도 한다. - 'target' 속성을 통해서 현재 문서에서 새로운 문서로 이동할 때 새로운 문서를 현재 탭에서 열지 아니면 새로운 탭에서 열지에 대한 여부를 설정할 수 있다. ② href 속성 - href => Hypertex.. 2023. 3. 29.
[CSS] 선택자 1 (기본, 그룹 선택자) 목차 1. 선택자 ① 선택자의 정의 ② 기본 선택자 (전체, 태그, Class, ID) (1). 전체 선택자 (Universal Selector) (2). 태그 선택자 (Type Selector) (3). Class 선택자 (Class Selector) (4). ID 선택자 (ID Selector) ③ 그룹 선택자 2. 마치며 1. 선택자 (Selector) ① 선택자의 정의 - 웹 페이지의 HTML 요소를 대상으로, CSS 스타일을 지정하려고 할 때 사용된다. (이번 장에서는 CSS 스타일을 지정하는 선택자 중 '전체', '태그', 'class', 'id', '그룹' 다섯 가지만 다루고, 나머지 선택자들은 추후에 다루도록 하겠다.) - 선택자에 의해 선택된 요소들은 '선택자의 주체'로 지정된다. [in.. 2023. 3. 24.
[CSS] CSS 개요 (CSS 정의, 기본 문법) 목차 1. CSS 개요 2. CSS 기본 문법 ① 'style' 속성으로 CSS 스타일 정의 ② '' 태그로 CSS 스타일 정의 ③ HTML 문서에 스타일 시트 파일(*.css)을 연결해서 CSS 스타일을 정의 3. 마치며 1. CSS 개요 - CSS => Cascading Style Sheets, 계단식으로 스타일을 정의하는 문서 (HTML은 태그가 태그를 포함하는 계단식 구조를 가지고 있다.) - HTML 문서에 스타일을 추가하는 언어 - '*.css' => 파일 확장자 명 - CSS는 HTML 문서의 스타일을 정의하는 것이 목적이기 때문에 HTML 문서와 같이 사용해야 하며, 그렇지 않다면 단순한 텍스트 문서에 불과하다. - HTML이 프로그래밍 언어가 아니라 마크업 언어인 것처럼 CSS는 프로그래.. 2023. 3. 20.
[HTML] <img> 태그 1. 태그 - img => image - 이미지를 표시할 때 사용되는 태그로 단일 태그이다. - 필수적으로 있어야하는 속성은 이미지의 url을 담는 src 속성이 있고 그 외에 이미지가 나오지 않을 때 대체 텍스트를 출력하는 alt 속성 출력되는 이미지의 크기를 살정하는 width, height 속성 등을 사용한다. * 여기서 다루지 않은 나머지 속성들에 대해서는 아래 링크를 통해서 확인하면 된다. HTML 삽입 미리보기할 수 없는 소스 ① src 속성 - src => Source, (자료의)출처 - 표시할 이미지 파일의 url과 파일 명을 입력받는 속성, 여기서 들어갈 수 있는 값은 내 컴퓨터에 저장된 이미지의 url이나, 아니면 서버에 저장된 이미지의 url이 들어간다. - 의 필수 사항 ② alt .. 2023. 3. 19.
[HTML] 컨테이너 태그(<div>, <span>) & 전역 속성 목차 1. 컨테이너 태그 ① 태그 ② 태그 ③ 컨테이너 태그 예제 2. 전역 속성 (Global Attributes) ① id 속성 ② class 속성 ③ style 속성 ④ title 속성 3. 마치며 1. 컨테이너 태그 HTML 문서의 콘텐츠, 레이아웃에 아무런 영향을 주지 않고 단지 다른 요소 여러 개를 묶어서 관리하게 편하게 만드는 역할을 하는 태그가 존재하는데 이러한 태그를 '컨테이너 태그'라고 한다. 컨테이너 태그는 콘텐츠의 내용을 구분해야 하거나 특정한 영역에 CSS 스타일을 공통 적용을 하려고 할 때 사용된다. 대표적인 컨테이너 태그로는 , 두 가지가 존재한다. ① 태그 - 블록 레벨 요소를 만드는 블록 태그, 레이아웃을 나눌 때 사용한다. - 여러 개의 콘텐츠를 하나의 블록으로 묶고 싶을.. 2023. 3. 16.
[HTML] 인라인 태그 8가지 목차 1. / 태그 ① 태그 ② 태그 2. / 태그 ① 태그 ② 태그 3. 태그 4. 태그 5. / 태그 ① 태그 ② 태그 6. 마치며 1. / 태그 ① 태그 - b => bold, 굵은 활자체, 볼드체 - 해당 태그로 감싼 텍스트를 굵은 글씨체 (텍스트)로 표시하는 역할을 하는 태그 - 문장에서 특정 텍스트의 주의를 끌기 위한 용도로만 사용되는 태그로 텍스트 자체의 중요성을 강조하려는 목적이면 , 등의 태그를 사용한다. b 태그는 특정 텍스트 자체에 주의를 끌기 위해서 사용합니다. 이 문장은 b 태그를 통해 단순히 굵은 글씨로 표현된 텍스트입니다. 2023. 3. 14.
[프로그래머스] 코딩테스트 입문 - 두 수의 나눗셈 (Java) 코딩테스트 문제 링크 HTML 삽입 미리보기할 수 없는 소스 ▶ 문제 명: [프로그래머스] 코딩테스트 입문 - 두 수의 나눗셈 ▶ 문제 설명 ▶ 사용한 언어: Java ▶ 문제 풀이 //프로그래머스 코딩테스트 입문 //두 수의 나눗셈 import com.sun.org.apache.bcel.internal.classfile.SourceFile; public class Main { public static void main(String[] args){ Solution Example = new Solution(); Example.solution(3,2); Example.solution(7,3); Example.solution(1,16); } } class Solution { int solution(int nu.. 2023. 3. 4.
[프로그래머스] 코딩테스트 입문 - 각도기 (Java) HTML 삽입 미리보기할 수 없는 소스 ▶ 문제 명: [프로그래머스] 코딩테스트 입문 - 각도기 ▶ 제시된 문제 요약 - int형 매개변수 angle이 예각일 때 1을, 직각일 때 2, 둔각일 때 3, 평각일 때 4를 return하는 solution 함수를 완성해주세요. 예각: 0 < angle < 90 직각: angle = 90 둔각: 90 < angle < 180 평각: angle = 180 사용한 언어: Java ▶ 문제 풀이 public class Main { public static void main(String[] args){ Solution Example = new Solution(); Example.solution(91); } } class Solution { int solution(int.. 2023. 3. 4.

티스토리툴바