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' 카테고리의 다른 글

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

<script type="text/javascript"> 

location.href="maincontroller/List.do"; 

</script>

'HTML' 카테고리의 다른 글

table colgroup 사용방법  (0) 2018.10.14
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' 카테고리의 다른 글

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' 카테고리의 다른 글

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' 카테고리의 다른 글

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

+ Recent posts

티스토리툴바