본문 바로가기

Programming

 (63)
[CSS] 외부의 css 파일 적용하는 법 html만으로 웹 사이트를 디자인하는 것에는 한계가 있습니다. 그리고 html의 한계를 보완해주는 것이 바로 css입니다. css를 적용하는 방법에는 크게 html 내부에 css를 작성하는 방법과 외부의 css파일을 불러와 적용하는 방법이 있습니다. 이 글은 외부의 css 파일을 적용하는 법에 대해 다루고 있습니다. 외부의 css 파일은 태그를 통해 적용할 수 있습니다. 1. css 파일 만들기 외부의 css 파일을 적용하기에 앞서 사용할 css 파일을 만들어야합니다. css 파일을 만드는 방법은 html과 같습니다. 편집기(메모장, visual studio code 등)를 실행하신 후 css를 작성해주세요. css를 작성할 때에는 가장 먼저 @charset "utf-8";를 작성해주세요. 코드의 문자 ..
[CSS] html 내부에 css 적용하는 법 html만으로 웹 사이트를 디자인하는 것에는 한계가 있습니다. 그리고 html의 한계를 보완해주는 것이 바로 css입니다. css를 적용하는 방법에는 크게 html 내부에 css를 작성하는 방법과 외부의 css파일을 불러와 적용하는 방법이 있습니다. 이 글은 html 내부에 css를 작성하는 방법에 대해 다루고 있습니다. html 내부에 css를 작성하는 방법은 css 적용 예제 화면의 배경색과 의 텍스트의 색이 변경된 것을 확인할 수 있습니다. 2. 특정 태그에 직접 css 작성하기 특정 태그에만 css를 적용하고 싶다면 직접 태그에 css를 작성하시면 됩니다. 이 css는 해당 태그에서만 유효하고 다른 태그에는 적용되지 않습니다. 작성 방법은 css를 적용하고 싶은 태그 옆에 style=" "를 입력..
[HTML] 표 테두리 스타일 변경하는 법 표(테이블)을 만들다보면 표의 테두리의 스타일을 변경해야하는 경우가 발생합니다. HTML에서는 속성들에 변화를 줌으로써 테두리의 유형, 두께, 색상을 변경할 수 있습니다. 1. 테두리 유형 변경하기 테두리 유형을 변경하기 위해서는 border-style 속성을 사용해야합니다. border-style의 기본값은 none이기 때문에 처음 표를 만들었을 때 테두리가 없는 표가 출력되는 이유도 이 때문입니다. border-style 속성이 지원하는 테두리 유형은 다음과 같습니다. 유형 설명 none 기본 값. 테두리 없음 hidden 테두리 숨기기 solid 실선 double 이중선 dashed 파선 dotted 점선 ridge 입체적으로 튀어나온 느낌을 주는 선 groove 입체적으로 들어간 느낌을 주는 선 ..
[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 태그이기 때문에 인용문이 자동으로 줄바꿈되어 ..

티스토리툴바