어제 오늘 내일

기본 테이블 그리기 HTML에 아무런 스타일을 지정하지 않고, 태그만 사용해서 테이블을 그리면 테두리가 표시되지 않습니다. Product Price Apple 3000 Banana 2000 테이블에 테두리 표시하기 테이블의 테두리를 표시하기 위해서 HTML과 CSS의 border 속성을 사용할 수 있습니다. HTML의 border 속성 Product Price Apple 3000 Banana 2000 태그에 border 속성값을 1로 지정하였습니다. CSS의 border 속성 Product Price Apple 3000 Banana 2000 table, td, th { border : 1px solid black; }; CSS의 border 속성을 '1px solid black'으로 정의하였습니다. 이때..

CSS의 속성을 이용하여 div의 테두리를 그리는 방법을 정리하였습니다. 1. border 2. border-style, border-width, border-color 3. border-top, border-right, border-bottom, border-left 4. outline 5. outline과 border의 차이점 1. border border 속성 사용하기 1 안녕하세요? div { width : 100px; height: 100px; background-color: #f5d682; border: 1px solid red; } CSS의 border속성을 정의하여 div의 테두리를 그려주었습니다. border 속성 사용하기 2 dotted red solid 6px solid div { w..

지난 번에는 하이퍼링크(a href)의 밑줄을 없애는 방법을 알아보았습니다. [HTML/CSS] 링크(a href)의 밑줄 없애기, 점선, 색깔 바꾸기 [HTML/CSS] 링크(a href)의 밑줄 없애기, 점선, 색깔 바꾸기 HTML에서 다른 페이지로 이동할 수 있는 링크를 생성하면 기본적으로 아래에 밑줄이 표시됩니다. 블로그 메인으로 가기 CSS를 적용해서 이 밑줄을 없애는 방법을 알아보겠습니다. 밑줄 없애기 (tex hianna.tistory.com 기본 하이퍼링크는 사용자가 링크를 클릭하기 전과 후의 링크 색깔이 다릅니다. 이번에는 하이버링크의 색깔을 바꾸는 방법에 대해서 정리합니다. 하이퍼링크 글자색 바꾸기 블로그 홈으로 이동하기 a:link { color : pink; } a:visited {..

HTML에서 다른 페이지로 이동할 수 있는 링크를 생성하면 기본적으로 아래에 밑줄이 표시됩니다. 블로그 메인으로 가기 CSS를 적용해서 이 밑줄을 없애는 방법을 알아보겠습니다. 밑줄 없애기 (text-decoration-line) 블로그 메인으로 가기 a { text-decoration-line: none; /* text-decoration-line: underline; */ /* text-decoration-line: overline; */ /* text-decoration-line: line-through; */ /* text-decoration-line: underline line-through overline; */ } 밑줄을 없애기 위해서 'text-decoration-line' 속성을 none..

HTML에서 링크된 페이지를 새창 또는 새탭으로 여는 방법입니다. 블로그 새창에서 열기 태그로 링크된 페이지를 새창 또는 새탭으로 열기 위해서는 target 속성을 추가하고, 그 값을 '_blank'로 지정해야합니다. 하지만, 아쉽게도 '새창'에서 열 것이냐, '새탭'에서 열 것이냐는 HTML로 지정할 수 없습니다. 그것은 사용자 브라우저의 설정을 따릅니다. 인터넷 익스플로러(IE) 링크 새탭/새창에서 열기 설정 구글 검색 결과 새탭에서 열기

HTML에서 테이블을 표현하고, 테이블의 셀을 병합하는 방법을 알아보도록 하겠습니다. 먼저, HTML로 테이블을 그리는 방법을 모른다면 지난 포스팅을 참조하세요. [HTML] 기본 테이블(표, Table) 그리기 (table, tr, td, th) [HTML] 테이블 제목 지정하기, caption tag 아래 예제 테이블을 가지고 가로, 세로 셀 병합을 해 보도록 하겠습니다. 학년 반 1 1 1 2 2 1 세로 셀 병합하기 (rowspan) 학년 반 1 1 2 2 1 위 코드는 2개의 '1학년' 항목이 2 row가 병합되었습니다. 2개의 row가 병합되었으므로, 결국 세로 방향으로 합쳐진 셀이 만들어진 것입니다. 여러줄의 row를 병합 할때는 위의 예시처럼 병합을 시작하려는 cell에 rowspan을 정..

datalist와 select는 비슷해보이지만, 차이점이 있습니다. === 선택 === 한국어 영어 중국어 스페인어 select는 사용자가 선택할 수 있는 선택 항목을 제공하고, 그 범위내에서만 선택이 가능합니다. [HTML] 콤보박스(select) (1) - 기본값 지정, 비활성화, 항목 비활성화 [HTML] 콤보박스(select) (2) - 사이즈 지정, 중복선택, 카테고리 설정 [Javascript] 콤보박스(select)에서 선택한 값, 텍스트 출력하기 datalist는 option 목록에 없는 값도, 사용자의 입력을 받을 수 있습니다. 사용자가 입력창에 타이핑을 하면, option 목록에서 일치하는 값을 찾아서 자동완성 기능을 제공합니다. 자동완성 기능을 제공하기 때문에, 사용자가 선택해야 할 ..

input에 자동완성이 적용되는 경우 사용자의 입력을 받는 input 항목을 입력하다보면 아래의 예제와 같이 특정 input의 경우 사용자가 기존에 입력했던 값을 기반으로 자동완성이 제공되는 경우가 있습니다. 이름 : 이메일 : input의 name 속성이나 id 속성이 같을 경우 자동완성 기능이 제공됩니다. 위 예제는 많은 웹사이트에서 사용하는 id 속성값인 'name', 'email'을 지정하였습니다. 아마, 다른 사이트에 입력한 적이 있던 name이나 email 목록이 자동완성으로 목록에 나타날 것입니다. 이것은 보통 브라우저가 자동으로 해주는데, 어떤 경우에는 이 기능을 해제해야 할 필요도 있습니다. input에 자동완성 해제하기 이름 : 이메일 : input에 자동 완성을 해제하기 위해서 'au..

input 필드를 비활성화 하는 방법은 disabled 속성을 사용하는 방법과 readonly 속성을 사용하는 방법 이렇게 2가지가 있습니다. 이 두가지 속성을 사용하는 방법과 차이점을 알아보도록 하겠습니다. input 필드 비활성화 하기 (disabled, readonly 차이) 1. disabled 2. readonly 1. disabled input 필드에 disabled 속성을 사용하면, 위의 예제와 같이 input 필드가 비활성화 됩니다. input 필드의 색깔이 바뀌고, input 필드를 클릭해도 포커스가 가지 않습니다. 가장 중요한 것은, disabled 속성을 설정하면, 위의 예제와 같이 기본값이 설정되어 있더라도, submit을 수행하면 값이 전달되지 않습니다. 2. readonly in..

웹페이지에서 사용자의 로컬 파일을 입력받기 위해서는 다음과 같이 input 태그의 type속성을 file로 지정하는 방법을 사용합니다. See the Pen read file by anna (@hianna) on CodePen. 여기에서는 input의 type을 'file'로 지정했을 때 추가로 사용할 수 있는 속성들에 대해서 알아보도록 하겠습니다. > "accept" 입력받을 수 있는 파일의 유형을 지정하는 속성입니다. accept 속성을 지정하지 않으면 모든 유형의 파일을 입력 받을 수 있습니다. 여러 종류의 파일을 입력받기 위해서는 아래와 같이 쉼표로 목록을 구분하여 작성합니다. See the Pen read file by anna (@hianna) on CodePen. accept 속성 값 - 확..