Programming/HTML5 & CSS3 (37) 썸네일형 리스트형 [HTML] 셀합침, 표(테이블)에 배경색 넣는 법 표(테이블)을 만들다보면 테이블의 셀을 합치거나 테이블별로 색을 다르게 해야하는 경우가 발생합니다. html에서는 rowspan, colspan 속성을 변경시켜 셀합침 작업을 할 수 있고 bgcolor 속성을 변경시켜 각 셀의 배경색을 변경할 수 있습니다. 1. 셀합침 하는 법 셀 합침을 하기 위해서는 rowspan과 colspan 속성을 변경해야합니다. rowspan은 세로로 몇 개의 셀을 합칠지를 colspan은 가로로 몇 개의 셀을 합칠지를 결정합니다. rowspan=" ", colspan=" " 형태로 사용하며 따옴표("")안에 합칠 셀의 갯수를 입력하시면 됩니다. 해당 속성들은 합칠 셀의 태그 옆에 작성하시면 됩니다. 예를 들어, ' '는 가로로 4개의 셀을 합치겠다는 의미입니다. 즉, 이 셀은.. [HTML] 표(테이블) 만드는 법 코드를 작성하다보면 표를 만들어야하는 경우가 발생합니다. html에서는 , , 태그를 적절히 사용해 표를 만들 수 있습니다. 표 삽입하는 법 표를 삽입하기 위해서는 , 총 3개의 태그를 사용해야합니다. 각 태그의 쓰임새는 다음과 같습니다. 태그 설명 표(테이블)의 시작과 끝을 의미합니다. 표(테이블)의 행을 의미합니다. 표(테이블)의 열을 의미합니다. 표(테이블)의 제목을 의미하며 가운데 정렬과 굵게 효과가 기본적으로 적용됩니다. 태그들을 사용해 표를 만들어 보겠습니다. 아래 코드는 2×3 크기의 표를 만드는 코드입니다. 가장 먼저 표의 시작과 끝을 의미하는 을 작성하신 후 블록 내부에 태그와 태그를 작성해주세요. 먼저 태그를 사용해 표의 행을 만드신 후 각 행마다 태그를 사용해 열을 만드셔야합니다. 즉.. [HTML] 이미지, 수평선 삽입하는 법 코드를 작성하다보면 이미지와 수평선을 삽입해야하는 경우가 발생합니다. html에서는 태그를 이용해 이미지를 태그를 이용해 수평선을 삽입할 수 있습니다. 이미지 삽입하는 법 : 태그 이미지를 넣어야하는 경우 태그를 사용하시면 됩니다. 태그의 형태는 다음과 같습니다. src에는 출력하고자 하는 이미지 파일의 위치를 입력해주시면 됩니다. alt에는 이미지 출력에 문제가 발생했을 때 이미지 대신 출력할 텍스트를 입력해주시면 됩니다. src와 alt는 태그의 필수 속성으로 반드시 모두 입력해주셔야 합니다. width와 height는 각각 이미지의 가로 길이와 세로 길이를 의미합니다. 출력하고자 하는 이미지의 크기를 width와 height 속성을 사용해서 조절하시면 됩니다. width와 height 속성은 선택사.. [HTML] 텍스트 스타일 관련 태그 사용하는 법 css를 사용하지 않고 html만으로도 텍스트의 스타일을 지정할 수 있습니다. 굵게(진하게), 기울임, 텍스트 색, 텍스트 크기 변경하는 법에 대해 알아보겠습니다. 1. '굵게(진하게)' 효과 적용하기 : 태그, 태그 텍스트에 굵게(진하게) 효과를 적용하기 위해서는 태그 또는 태그를 사용하시면 됩니다. 일반 텍스트 굵은 효과 적용 텍스트 1 굵은 효과 적용 텍스트 2 2. 기울임 효과 적용하기 : 태그, 태그 텍스트에 기울임 효과를 적용하기 위해서는 태그 또는 태그를 사용하시면 됩니다. 일반 텍스트 기울임 효과 적용 텍스트 1 기울임 효과 적용 텍스트 2 3. 텍스트 색 변경 : 태그 텍스트 색상은 태그를 사용해 지정하실 수 있습니다. 큰따옴표("")사이에 텍스트에 지정하고자 하는 색의 색상코드를 입력하.. [HTML] 인용문 삽입하는 법 코드를 작성하다보면 인용문을 삽입해야하는 경우가 발생합니다. HTML에서 인용문을 삽입하는 방법은 2가지로 태그를 사용하는 방식과 태그를 사용하는 방식이 있습니다. 전자는 block-level 태그로 인용문이 자동으로 줄바꿈과 들여쓰기되어 출력됩니다. 반면, 후자는 inline-level 태그로 줄바꿈과 들여쓰기가 되지 않은 채로 출력됩니다. 대신, 인용문의 구분을 위해 인용문의 처음과 끝에 따옴표("")가 자동으로 출력됩니다. 인용문 삽입하는 법 1 : 태그 인용문을 삽입하기 위해서는 인용되는 부분을 태그로 감싸시면 됩니다. 해당 태그를 사용해 감싸진 텍스트는 들여쓰기가 되어있어 태그 밖의 다른 텍스트와 비교했을 때 구분됩니다. 태그는 block-level 태그이기 때문에 인용문이 자동으로 줄바꿈되어 .. [HTML] 공백문자, 주석 삽입하는 법 코드를 작성하다보면 공백문자와 주석을 삽입해야하는 경우가 발생합니다. html에서는  를 사용해 공백문자를 삽입할 수 있고 를 사용해 주석처리를 할 수 있습니다. 공백문자 삽입하는 법 공백문자를 넣어야하는 경우  를 사용하시면 됩니다.  는 줄바꿈 없는 공백을 의미하며 주로 단어의 잘림과 자동 줄바꿈 방지 등을 목적으로 사용합니다. 텍스트   태그 실습 예제를 진행하겠습니다. 다음과 같은 텍스트를 입력해주세요. "Hello World!" 주석 처리하는 법 주석을 삽입하기 위해서는 주석 처리하고자 하는 부분을 로 감싸시면 됩니다. 텍스트   태그 실습 예제를 진행하겠습니다. 다음과 같은 텍스트를 입력해주세요. "Hello World!" [HTML] 텍스트 출력 및 줄바꿈 하는 법 웹 화면에 텍스트를 출력할 때는 태그를 사용할 수 있습니다. 여는 태그 와 닫는 태그 를 모두 사용해야하며 두 태그는 하나의 텍스트 블록을 형성합니다. 해당 태그는 이렇게 형성된 블록 내부의 텍스트를 모두 출력하며 이 텍스트들은 줄바꿈이 되어있지 않습니다. 텍스트의 줄바꿈은 이라는 태그를 통해 수행하실 수 있습니다. 텍스트 출력하는 법 : 태그 여는 태그 와 닫는 태그 사이에 출력하고자 하는 텍스트를 입력하시면 됩니다. 와 는 하나의 텍스트 블록을 형성하며 이 블록 내부에 있는 텍스트를 모두 출력합니다. 텍스트 태그 실습 예제를 진행하겠습니다. 다음과 같은 텍스트를 입력해주세요. "Hello World!" 텍스트 줄바꿈하는 법 : 태그 텍스트의 줄바꿈을 하기 위해서는 태그를 사용하셔야 합니다. 텍스트 태.. [HTML] 제목 텍스트 태그 사용하는 법 제목 텍스트를 작성할 때는 태그를 사용할 수 있습니다. 여기서 n은 숫자를 의미하며 n의 숫자가 작을 수록 큰 제목 텍스트가 출력됩니다. n에 들어갈 수 있는 숫자는 1부터 6까지 총 6가지입니다. 제목 텍스트 태그 사용 법 제목 텍스트 태그는 여는 태그와 닫는 태그를 모두 사용해야하며 두 태그 사이에 텍스트를 입력합니다. 다음과 같은 코드를 작성하시면 아래의 사진과 같이 제목 텍스트가 출력된 것을 확인하실 수 있습니다. h1 태그 숫자별 제목 텍스트 비교 h1 태그 h2 태그 h3 태그 h4 태그 h5 태그 h6 태그 이전 1 2 3 4 5 다음
