어제 오늘 내일

지난번에는 HTML에서 순서없는 목록을 만드는 방법을 알아보았다.[HTML] 순서없는 목록 만들기, 이번에는 순서있는 목록, 즉, 목록 앞에 의미없는 기호대신 순서를 나타낼 수 있는숫자나 알파벳을 붙여서 나타내는 방법을 알아보도록 하겠다. 순서있는 목록 만들기, 순서있는 목록을 만들기 위해서는 두 가지 태그를 사용해야 한다. 은 'Ordered List'의 약자이고,는 'List'의 약자이다. 순서없는 목록을 만드는 것과 마찬가지로 태그 안에는 목록을 만들 각각의 항목들을 작성하고,이 태그들을 태그로 감싸면 아래와 같이 숫자 목록이 만들어진다.See the Pen 리스트6 by anna (@hianna) on CodePen. 목록 순번 기준 변경하기이번에는 목록의 순번을 숫자 이외의 방법으로 나타내는 방..

이번에는 HTML에 순서없는 목록을 표현하는 방법을 알아보도록 하겠다. 순서없는 목록 만들기, 태그html에서 목록을 만들기 위해서는 두 가지 태그를 사용해야 한다. 은 'Unordered List'의 약자이고,은 'List'의 약자이다. 태그 안에는 목록을 만들 각각의 항목들을 작성하고,이 태그들을 태그로 감싸면 목록이 만들어진다. See the Pen 리스트1 by anna (@hianna) on CodePen. 각각의 항목들은 위와 같이 항목 앞에 항목을 구분하는 기호가 나타난다. 목록 기호 변경하기이번에는 이 기호들을 변경하는 방법을 알아보도록 하자. 목록 기호를 변경하기 위해서는 css의 'list-style-type' 속성을 지정해주면 된다.list-style-type 속성에 들어 갈 수 있는..

테이블의 제목을 지정하기 위해서 HTML에서는 이라는 태그를 사용한다. 이번에는 이 태그를 사용하는 방법을 알아보도록 하겠다. 태그는 테이블의 제목을 표현하기 위해 사용한다. See the Pen 테이블2 by anna (@hianna) on CodePen. 위와 같이 태그는 태그 안에서 사용되며, 테이블의 제목을 표현한다. 아무런 속성을 지정하지 않고 태그를 사용할 경우, 테이블의 caption 정보는 테이블의 위쪽에, 가운데 정렬되어 표현된다. caption의 위치를 옮기고 싶다면? 1. 태그 안에 align 속성을 지정하는 것이다. 하지만 비추! See the Pen 테이블3 by anna (@hianna) on CodePen. 위의 예제에서는 caption이 오른쪽으로 정렬되도록 지정하였다. 이와..

HTML에서 웹페이지에 테이블(표) 형태를 표현하기 위해서주로 태그를 사용한다.이번에는 이 table 태그와 관련된 태그와 속성을 이용해서 웹페이지에 table을 표현하는 방법을 알아보도록 하겠다. table 그리기 - 기본table을 표현하기 위해서는 가장 기본적으로 , , , 이렇게 네 가지 태그를 사용한다. 먼저 예제를 살펴보자.See the Pen 테이블1 by anna (@hianna) on CodePen. 기본적으로 테이블은 행과 열이 존재한다.그리고, 행 또는 열에 대해서 제목을 붙여주기도 한다. 위의 예와 같이html에서 표를 그리기 위해서는 태그 사이에행과 열, 제목을 표현해 주는 , , 태그를 사용하고,그 사이에 표에 넣어주고자 하는 내용을 적어주면 된다. tr은 'table row'의..

HTML 파일의 코드가 길어지면 도대체 이 코드들이 무슨 말을 하는 건지 알아보기가 힘들다.그래서, HTML은 브라우저가 알아보는 언어이지, 인간이 쉽게 알아보기 위한 언어는 아니기 때문이다.그래서, HTML 문서 안에 인간이 알아보기 위한 언어를 추가 할 수 있다.당연히 이 언어는 브라우저는 알아보지 못해야 하고, 웹 브라우저에 표시 되어서도 안된다.이를 보통 '주석을 단다'고 한다. HTML 주석(Comment) 달기 HTML 내에서는 '' 태그 사이에 주석을 삽입할 수 있다. 이 태그 사이의 말들을 브라우저는 해석하지 않는다. 아래는 웹 브라우저에서 html 파일을 작성하고, 바로바로 확인 할 수 있는 도구이다.아래 코드에서 주석을 삭제하면 어떻게 되는지 확인해 보자. See the Pen 주석2 ..

HTML5의 큰 특징 중 하나는 시맨틱(Semantic) 태그이다. 시맨틱(Semantic) 태그란? 시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다. 즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다. 예를 들어, 태그는 non-semantic 태그라고 할 수 있고, , 등의 태그는 semantic 태그라고 볼 수 있다. 일반적으로 태그만 보고는 이 태그 안에 들어간 내용의 의미를 알 수가 없다. 반면, , 등의 태그는 대략이라도 태그 안에 들어갈 내용의 의미를 유추할 수 있다. 태그 안에는 표가 들어갈 것이고, 태그 안에는 어떤 형태의 글이든 글이 들어갈 것이라는 것 정도는 유추 할수 있다. 좀 더 자세히 살펴보면, 이전의 html에서 heade..

https://www.acmicpc.net/problem/2503 야구게임의 숫자를 맞추는 게임이다. 민혁이는 1에서 9까지의 서로 다른 임의의 세자리 숫자를 생각하고 있고,영수는 세자리 숫자를 추측하여 말하면,민혁이는 민혁이가 생각한 임의의 세자리 숫자와 영수가 추측한 세자리 숫자가 어떻게 일치하는 지를 말해 준다.위치와 숫자가 일치하면 스트라이크, 위치는 틀리고 숫자만 일치하면 볼. 이렇게 민혁이와 영수가 문답을 나눈 결과를 보고 정답이 될 수 있는 숫자들의 갯수를 알아내는 문제이다. 문제를 풀기 위해 나는숫자 111~999까지 순서대로 숫자를 생성하여문제에서 주어진 조건에 일치하는지 여부를 하나씩 확인하는 방법을 사용하였다.물론, 민혁이가 생각하는 숫자의 각 자릿수는 서로 모두 서로 다른 숫자이므로..

https://www.acmicpc.net/problem/2644 주어진 문제의 촌수를 계산하는 문제이다. 문제에 예시로 주어진 경우를 트리로 표현하면 다음과 같다. 문제는 이 트리에서 문제에 주어진 두 숫자의 관계가 몇촌인지를 계산하는 것이다. 문제풀이.먼저 두 숫자의 부모를 모두 찾아서 두개의 array에 담았다.그리고 이 두개의 array를 순서대로 비교하여 동일한 숫자가 나오는 index값을 찾아서 그 두개의 index를 더해주면 두 숫자의 촌수가 된다. 예를 들어,7의 부모는 7을 포함하여 arrayA = 7,2,13의 부모는 3을 퐇마하여 arrayB = 3,17과 3의 부모를 저장한 위의 두 arrayA와 arrayB를 순차적으로 탐색했을 때 공통된 숫자는 1.arrayA에서 1의 index..

https://www.acmicpc.net/problem/2309 9명의 난쟁이들 중, 7명의 키의 합이 100임을 이용하여7명의 난쟁이들을 찾아내는 문제이다. 7명의 키의 합이 100이어야 하기 때문에매번 다른 2명의 난쟁이들을 빼고,나머지 7명의 난쟁이들의 키의 합을 구했다. 그런데 아무리 난쟁이라고 하지만7명의 키를 합쳐서 100이라니...ㅠㅠ import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import java.util.Scanner; public class Main { public static void main(String[] args) { // TODO Auto-generated meth..

https://www.acmicpc.net/problem/2292 6각형으로 이루어진 벌집의 중심에서 특정 위치까지 이동할 때최소한으로 움직이는 횟수를 구하는 문제이다. 벌집의 각 방에 매겨진 숫자를 잘 살펴보면가장 가운데 있는 방의 최대 숫자는 1두번째 단계에 있는 방의 최대 숫자는 7그 다음의 방의 최대 숫자는 19그 다음의 방의 최대 숫자는 37.....이다. 1, 7, 19, 37, 61... 1 7 = 1 + 619 = 7 + 6 + 637 = 19 + 6 + 6 + 6 61 = 37 + 6 + 6+ 6+ 6... 이런 식이 성립함을 알 수 있다.위와 같은 알고리즘을 반영하여 아래 코드를 작성하였다. import java.util.Scanner; public class Main { public ..