table colgroup 사용방법

<colgroup> 은 테이블의 한 행을 기준으로 일괄적인 디자인을 적용하고자 할 때에 아주 유용하다.

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
​
<body>
    <table>
        <colgroup>
            <col/>
            <col/>
            <col width="70px" />
            <col style="width: 70px;" />
            <col class="small-width" />
        </colgroup>
        <thead>
            <tr>
                <th style="border: 1px solid gray;">A</th>
                <th style="border: 1px solid gray;">B</th>
                <th style="border: 1px solid gray;">C</th>
                <th style="border: 1px solid gray;">D</th>
                <th style="border: 1px solid gray;">E</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
                <td>E</td>
            </tr>
        </tbody>
    </table>
</body>
​
</html>
​

<colgroup>
    <col/>
    <col/>
    <col width="70px" />
</colgroup>

<col/> <col/> 대신 <col span="2"/> 코드 사용가능

<colgroup>
  <col span="2"/>
  <col style="width: 70px;"/>
</colgroup>


'HTML' 카테고리의 다른 글

Echart resize  (0) 2024.06.06
javascript 페이지 이동  (0) 2018.10.05
HTML 색상표현  (0) 2017.12.19
HTML이란?  (0) 2017.12.18
HTML 이미지 삽입  (0) 2017.12.18

HTML은 색상을 RGB값을 통해 표현합니다.




그많은 색을 어떻게 기억하냐면..




http://html-color-codes.info/Korean/

이렇게 RGB값을 찾기 쉽게 해주는 사이트를 즐겨찾기 추가 해놓으면 됩니다.


컬러 코드를 복사해서 넣어주시면 됩니다.




먼저 html페이지의 배경화면에 컬러를 넣는 방법입니다.

<body  bgcolor="blue">  또는 <body  bgcolor=“#0000FF"> 

위 처럼 직접 컬러를 지정하거나 rgb컬러 코드를 삽입해 주면 됩니다.


<!doctype html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>HTML 실습</title>

</head>

<body  bgcolor="blue">

</body>

</html>




소스코드를 넣고 저장후 HTML파일을 눌러보면 저런게 ...무섭게 파란 화면이 뜹니다.

원하는 색으로 해주면 더 좋겠죠 ㅎㅎ




'HTML' 카테고리의 다른 글

Echart resize  (0) 2024.06.06
table colgroup 사용방법  (0) 2018.10.14
javascript 페이지 이동  (0) 2018.10.05
HTML이란?  (0) 2017.12.18
HTML 이미지 삽입  (0) 2017.12.18

html이란

웹 브라우저에서 사용되는 문서형식으로 html or htm의 확장자를 갖는다

hyper text markup language 의 약자



태그의 사용

<요소명  속성명=속성값 ....> 내용 </요소명>

(태그의 시작)                             (태그의 끝)

태그에서 대문자와 소문자를 구분하지 않는다.



문서의 기본구조



html 태그 설명

<HTML>

<HTML>...</HTML>

HTML 언어로 작성되어 있다는 것을 알려줍니다.

<HEAD>

<HEAD>...</HEAD>

Heading의 준말로 글의 머리말에 해당합니다.

<BODY>

<BODY>...</BODY>

본문에 해당하는 부분을 알려줍니다.

<TITLE>

<TITLE>...</TITLE>

타이틀바에 새겨질 글자를 정의합니다.


'HTML' 카테고리의 다른 글

Echart resize  (0) 2024.06.06
table colgroup 사용방법  (0) 2018.10.14
javascript 페이지 이동  (0) 2018.10.05
HTML 색상표현  (0) 2017.12.19
HTML 이미지 삽입  (0) 2017.12.18


1. 먼저 폴더를 생성합니다. (폴더이름: 연습) 그리고 이미지 파일만 모아놓을 폴더를 하나더 만들어 줍니다,




2. 삽입하려는 이미지를 생성한 폴더 내에 새로운 이미지 폴더(폴더이름: img)에 저장합니다.

이때 이미지의 확장자를 확인해줍니다.

저는 JPG파일이네요




3. 이제 HTML소스 코드를 넣어 봅시다.

소스코드

<!doctype html>


<html lang="ko">

<head>

<meta charset="utf-8">

<title>연습</title>

</head>


<body>

<img src="siba01.jpg" width="150" height=""150">

<p>첫번째 이미지 출력</p>


</body>



</html>

 



4. 편집기를 이용해서 위의 코드를 입력하고 저장합니다.

저장할때는 확장자를 HTML로 해주세요

저는 편집기를 EditPlus/Notepadd++ 를 씁니다. 

editplus는 시디키가 필요한 프로그램이며 노트패드++는 프리웨어입니다.




코드를 넣은 화면입니다. 아름답죠

들여쓰는 버릇은 중요하다고 합니다.

본인의 기호에 맞게 들여써봅시다.



저장된 폴더에 HTML파일을 눌러주면 띠용?

어...? 사진이 안나옵니다.


다시 위의 소스코드로 돌아가 뭘 잘못했는지 스캔해봅니다.



이미지 파일 명을 "siba_01"인데 "siba01"로 잘못입력했죠

거기다 html폴더내의 새로운 폴더를 만들어 이미지를 저장했기 때문에 

이미지 파일 앞에 폴더명을 적어주어야 해요!

그럼 수정하고 ctrl+s누른 후 다시 HTML파일을 눌러봅시다.


수정된 소스코드



쫜!

이렇게 길고 험난했던 HTML 이미지 삽입을 해보았습니다.












'HTML' 카테고리의 다른 글

Echart resize  (0) 2024.06.06
table colgroup 사용방법  (0) 2018.10.14
javascript 페이지 이동  (0) 2018.10.05
HTML 색상표현  (0) 2017.12.19
HTML이란?  (0) 2017.12.18

+ Recent posts

티스토리툴바