오늘도 코딩!

디스플레이 화면에 테이블표를 맞추고 싶다면, 태그 안에, 와 같은 코드를 넣어주면 된다. 테이블 자체에서 특정 열의 길이만 조절하고 싶다면, 태그 안에다가 style을 넣어주면 된다. 위치는 : 이거나, 퍼센테이지로 width의 value 값을 주는 경우, 상위 태그에서 width를 100% 설정해놔야 원하는 값으로 디스플레이 될 수 있다. (빨강 화살표) 테이블 열 (table row = tr) 의 높이를 재설정 하고 싶다면, 이런식으로, 태그에 style을 입혀주면 된다. size 값은 퍼센테이지나 px 값으로 주면 된다.

위와 같은, table border를 만들려면, CSS를 사용하면 된다. table, th, td 요소에 CSS의 border 특성을 추가해주면 된다. 한줄 짜리 테이블 border를 만들고 싶다면, 위와 같은 CSS의 border 코드 작성 후 border-collapse 에 value 값을 collapse 준 코드를 하나 더 짜면 된다. 테이블 표 cell 란에 색상을 넣어줄 수도 있다. 테이블 표의 색상을 지정해주고 싶다면, border-color 특성을 이용해서 색상을 지정해 줄 수 있다. 테이블표에, shape 을 둥글게 주고 싶다면, border-radius 특성을 이용하면 된다. ​ 바깥 테두리의 테이블 박스를 걷어내고 싶으면, table 을 걷어내고, th, td 로만 감싸주면 된다. 다음..

각각의 테이블 칸은 태그로 시작해서 로 닫힌다. td 는 테이블 데이터를 나타낸다. 와 사이의 content는 테이블 칸 안의 내용이 된다. content 에 들어갈 수 있는 HTML 요소는 : 텍스트, 이미지, 리스트, 다른 테이블 등이 있다. 각 테이블의 행은, 로 시작해서 태그로 끝난다. tr 은 테이블 행을 나타낸다. (table row) 테이블에 카테고리명 (Header) 를 만들고 싶은 경우, 태그 대신, 로 써주면 된다. (table header) 기본적으로, 태그 안에 있는 텍스트는 굵고, 가운데 정렬되어 표시된다. 변경하고 싶으면 CSS를 사용하면 된다.

**Favicon 은 브라우저 탭의 타이틀 텍스트 왼쪽편에 표시된 아이콘 그림 이미지를 말한다. Favicon 이미지는 어떤 그림이나 모두 사용 가능 하지만, 작은 이미지 이기 때문에, 심플할수록 좋다. 아래 링크와 같은 사이트에서 나만의 favicon도 만들어 볼 수 있다. favicon.ico Generator Preview Favicon in original size: www.favicon.cc Favicon 을 나의 웹사이트에 추가하기 위해서는, 등록할 이미지 파일을 웹서버의 root directory (계층적 파일 시스템에서 최상위 디렉토리)에 저장 하거나 root directory에 폴더를 생성해 폴더 안에 이미지 파일을 저장해준다. 통상적으로 favicon 이미지를 저장하는 이름은 : "fa..

HTML 태그는 서로 다른 디바이스나 각 기기의 화면 사이즈에 맞게끔 자동으로 디스플레이 되는 것을 도와주는 태그이다. 태그는 상위 태그로써, 하나 이상의 태그를 사용하고, srcset 속성을 사용해 각각의 다른 이미지도 넣을 수도 있다. 태그를 여러개 지정해 놓으면, 웹브라우저가 판단해서 가장 잘 디스플레이 되는 이미지로 보여준다. 만약 첫번째 source 에 해당되는 이미지를 브라우저가 읽어내었다면, 그 밑에 있는 다른 source 코드는 무시된다. 여기서 주의할 점은 태그는 섹션 안의 맨 마지막 문단에 와야 한다. 태그가 먹히지 않을 경우, 브라우저는 이 태그의 사진을 디스플레이 해준다. 이러한 태그를 쓰는 이유는, 몇몇의 브라우저나 디바이스들은 모든 이미지 포맷을 읽어내지 않는다. 그렇기 때문에,..

​ style 속성과 CSS의 background-image 특성을 사용 하면 된다. (p에다 코드를 짜주면, 단락 부분에만 배경이미지 보임) ​ 태그를 이용해 섹션에 추가하여 코드를 짤 수도 있다. (p에다 코드를 짜주면, 단락 부분에만 배경이미지 보임) 배경화면을 전체 배경에 입히고 싶다면, body 요소를 사용해서 코드를 짜주면 된다. 태그를 이용해 섹션에 추가하여 코드를 짠다. (여기서, 태그 안의 body와 문서 자체의 와는 다른 개념이므로, body가 2번 쓰일 수도 있다.) 배경 이미지가 요소보다 작은 경우, 이미지는 반복하여 나열된다. 이미지 자동 반복을 피하려면, background-repeat 속성에서 no-repeat 특성을 추가하여 코드를 추가해 주면 된다. 이미지를 전체 배경 커버..

​ 예를 들어, 컴퓨터와 핸드폰, 커피가 있는 1개의 이미지에서 각각의 컴퓨터,핸드폰,커피의 그림 부분을 클릭하면 서로 다른 HTML 링크페이지로 넘어갈 수 있게 만들 수 있다. 1) 태그를 사용하고, 속성으로 usemap = "#변수" 를 가져가면 된다 ​ 2) 그 다음, 요소를 추가한다. 요소는 이미지 map을 만드는 데 사용되고, name 속성을 사용하여 이미지에 연결 시킬 수 있다. name 속성은 반드시 의 usemap과 value 값이 같아야 한다. ​ 3) 클릭할 수 있는 영역 설정은 요소를 사용하면 된다. shape 이라는 속성을 사용하여, area를 지정하게 된다. ​ ** Shape ** ① rect : 사각형 ② circle : 원형 ③ poly : 다각형 ④ default : 기본값..

​ 태그는 empty 태그로써, closing tag를 동반하지 않고 단독으로 쓰인다. 태그가 가질 수 있는 속성은 2가지다. - src : 이미지 url - alt : 이미지에 대한 대체 텍스트 ​ ​ 이미지의 크기를 표현 하는 방법은 2가지가 있다. ​ 1) CSS의 style 속성을 이용하여 width와 height에 value를 주는 방법 ​ 2) HTML의 width와 height 속성을 이용 하는 방법 ​ 이미지의 크기는 반드시 지정되어야 한다. 그렇치 않을 경우, 이미지를 로드할 때 웹페이지가 깜빡 거리는 현상이 나타난다. 그리고 웬만하면 style 속성으로 사용하는 것이 좋다. 상위 그룹에서 크기를 변경하더라도, CSS style에는 적용되지 않으므로. ​ 1) Sub-folder 안에 있..

링크는 태그로 정의되고 href 를 속성으로 가진다. 형식 : link text 기본적으로 링크된 페이지는 현재 브라우저 창에서 넘어가게 되는데, 이것을 변경하려면, target 속성을 사용하면 된다. target 속성은 링크된 문서를 열 위치를 지정하고, 다음 values 중 하나를 가질 수 있다. 이러한 형식을 가진다. text ​ 1) _self : 기본값. 현재 윈도우창에서 그대로 링크된 웹페이지를 연다. 2) _blank : 새 윈도우 창을 열어서 웹페이지를 연다. 기존 창은 그대로 남는다. 3) _parent : 현재 프레임의 부모 프레임에서 새 웹페이지가 열린다. 4) _top : 최상위(가장 최고 부모)창에서 열린다. ​ URL 형식에는 다음과 같은 두가지 형식으로 구분된다. absoulu..

CSS 는 웹 페이지의 레이아웃 형식을 지정하는데 사용된다. 한번에 여러 웹페이지의 레이아웃 컨트롤이 가능하다. 부모 element에 적용을 하면 자식 element에 까지 자동으로 적용된다. 예를 들면, body에서 text 컬러를 blue로 지정 했을때, heading 과 paragraph 까지 text가 blue로 적용된다. CSS를 사용하는 3가지 방법이 있다. 일반적으로 사용되는 방법은 external. ​ 1. Inline : HTML 요소 내부의 style 속성 사용 2. Internal : 섹션의 요소 사용 3. external : 요소를 사용하여 외부 CSS 파일에 연결 ​ ​ ​ : 내부 style 속성 ​ Inline CSS는 HTML 요소에 고유한 스타일을 적용하는데 사용된다. 컬러..