더불어숲 숲을 그리다.

이미지 관련 태그 웹에서 사용하는 이미지 형식 웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질이 좋아야 하기 때문에 몇 가지 파일 형식만 사용할 수 있습니다. 파일 형식 설 명 GIF(Graphic Interchange Form) 표시할 수 있는 색상 수가 최대 256가지 뿐이지만 다른 이미지 파일 형식에 비해 파일 크기가 작기 때문에 아이콘이나 불릿 등 많은 이미지에 주로 사용합니다. 투명한 배경이나 움직이는 이미지를 만들 수 있다는 장점이 있습니다. JPG/JPEG (Joint Photographic Experts Group) 사진을 위해 개발된 형식으로 GIF보다 다양한 색상과 명암을 표현할 수 있습니다. 저장을 반복하다 보면 화질이 떨어질 수도 있습니다. PNG(Po..

표를 만드는 태그 2 1. , , 태그 - 표 구조 정의하기 표의 각 셀은 제목이 있는 부분과 실제 내용이 있는 본문 그리고 요약 부분이 있는 부분으로 표의 구조를 나눌 수 있는데 이때 사용하는 태그들이 제목 부분인 , 본문 부분인 , 요약 부분인 태그입니다. 위와 같이 표의 구조를 정의하면 시각장애인들도 화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있습니다. 기본형 : 구분 1분기 2분기 3분기 서울 10 5 20 경기 8 9 10 부산 11 6 7 합계 29 20 37 2. , 태그 - 여러 열 묶어 스타일 지정하기 표에서 하나의 열에 스타일을 지정하거나 열을 몇 개씩 묶어 스타일을 한꺼번에 지정할 수도 있습니다. 태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용하는 것으로 닫..

표를 만드는 태그 1 표는 행(row)과 열(column)로 이루어져 있고 행과 열이 만나 이루는 영역을 셀(cell)이라고 합니다. 하나의 표를 만들기 위해서는 여러 개의 태그가 필요합니다. 1. , , , 태그 - 기본적인 표 만들기 기본적인 표를 만들기 위해서는 가로축 행을 만드는 태그, 세로축 열을 만드는 태그가 각각 필요합니다. 그래야 겹치는 구간인 각 셀에 내용을 입력할 수 있습니다. 표를 만들 때는 태그를 이용해 전체 윤곽을 잡은 후 행(row)을 먼저 만들고 각 행마다 몇개의 셀(cell)이 들어갈지 결정합니다. 기본형 : 내용 내용 1-1. 태그 - 표에 제목 셀 만들기 표를 만들다 보면 첫 번째 행이나 첫번째 열에 셀의 제목을 넣는 경우가 많습니다. 태그 대신 태그를 사용하면 이런 과정..

목록을 만드는 태그 1. 태그, 태그 - 순서 없는 목록 만들기 순서가 필요하지 않은 목록을 만들 때는 태그를 사용하고 태그 안에 태그를 사용해 각 항목을 표시합니다. 순서 없는 목록의 경우, 각 항목 앞에 작은 원이나 사각형 같은 불릿이 붙습니다. 기본형 : 내용 내용 태그 순서 없는 목록 만들기 2. 태그, 태그 - 순서 있는 목록 만들기 항목을 나열하되 순서가 필요한 목록을 만들때는 태그를 사용하고 태그를 사용해 각 항목을 표시합니다. 태그에는 태그와 달리 여러 속성들이 함께 사용되어 목록의 숫자 표기 방법이나 시작하는 숫자 등을 바꿀 수 있습니다. HTML4에서는 type 속성을 이용해서 숫자의 종류를 다양하게 조절했지만 HTML5에서는 CSS의 list-style-type 속성을 이용해 조절합니..

텍스트를 한 줄로 표시하는 태그 아래 태그들은 텍스트에서 사용하는 태그들 중에서 태그를 적용해도 줄바꿈 없이 텍스트를 표시하는 '인라인 레벨'태그 입니다. 1. 태그, 태그 - 굵게 표시하기 텍스트 중에서 굵게 표시하려고 할 때 > 태그나 태그를 사용합니다. 화면으로 보기에는 차이가 느껴지지 않는 두 태그를 구분하는 이유는 화면 낭독기에서의 기능 때문입니다. 화면 낭독기에서는 강조하고 싶은 부분을 굵게 표시하더라도 내용을 눈으로 보는 것이 아니기 때문에 그 부분이 강조된 것인지, 다른 내용과 구분하기 위해 단지 굵게 표시한 것인지 구별하지 못합니다. 따라서 경고나 주의 사항처럼 중요한 내용이어서 강조해야 할 때는 태그를 사용하고 문서의 키워드처럼 단순히 굵게 표시할 때는 태그를 사용합니다. 기본형 : 굵..

텍스트를 덩어리로 묶어 주는 태그 텍스트를 블록(block)으로 묶어 처리하는 태그들입니다. 아래 태그들은 선택한 텍스트 글자에만 적용되는 것이 아니라 텍스트가 포함된 블록 전체에 적용됩니다. 1. 태그 태그는 제목을 표시할 때 사용됩니다. 제목 텍스트는 일반 텍스트보다 크고 진하게 표시됩니다. 제목 크기에 따라 ~ 태그까지 사용할 수 있는데 이 가장 크게 표시되고 이 가장 작게 표시됩니다. 기본형 : 제목 2. 태그 태그는 단락을 만들때 사용하는 태그이며 텍스트를 표시할 때 가장 많이 사용하는 태그입니다. 이때 단락이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말합니다. 태그로 표시하는 텍스트 단락은 태그를 만날 때까지 줄바꿈 없이 텍스트를 한 줄로 표시하는데 텍스트 줄이 브라우저 창의 너비보다 길어질 경..

서른 편의 이야기로 약 10개월간의 간암 간병기를 마무리하게 되었다. 아빠가 돌아가시고 1년 하고도 반년의 시간이 흐른 뒤에 당시에 간병을 하면서 적어두었던 투병 일지를 다시 꺼내 들 수 있었다. 그때의 막막하고도 절실했던 마음들이 생생하게 떠올랐고 다시 마음이 아프기도, 힘들기도 했지만 누군가 나와 우리 가족들이 그랬던 것 같은 힘든 상황에 처해 있다면 내가 겪었던 이야기들을 읽고 아주 작은 도움이나 위로가 될 수 있기를 바라는 마음에서 글을 쓰기 시작했다. 어쩌면 비로소 아빠를 온전히 떠나보는 내 여정이었을지도 모르겠다. 아빠는 우리 가족들에게 그리 살가우신 분은 아니었다. 또 그리 좋은 아빠도 아닌 그냥 그 시대의 아빠였고 엄마에게는 더욱 그러했던 남편이었다. 지금 아빠를 떠나보내고 후회되는 일은 ..

1. UI 요소 상태에 따른 가상 클래스 웹 사이트나 앱 화면을 디자인할 때 웹 요소의 상태에 따라 스타일을 지정하기 위해 UI 요소 상태에 따른 가상 클래스를 사용합니다. :enabled 와 :disabled 가상 클래스 선택자 해당 요소가 사용 가능한 상태일 때의 스타일을 지정하려면 :enabled 클래스를 사용하고 해당 요소가 사용 불가능한 상태일 때의 스타일을 지정하려면 :disabled 클래스를 사용합니다. 예를 들어 여러 줄의 텍스트를 입력할 수 있는 텍스트 영역 필드를 게시판 입력 화면으로 사용할 때는 enabled 상태이지만 회원 약관 등을 보여 줄 때는 사용자가 내용을 보기만 해야 하므로 disabled 상태로 만들어야 합니다. :checked 가상 클래스 선택자 라디오 박스나 체크 박스..

구조 가상 클래스 구조 가상 클래스란 말 그대로 웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용하는 가상 클래스 선택자입니다. 1. :root 가상 클래스 선택자 문서 안의 루트(root)요소에 스타일을 적용합니다. HTML 문서에서는 루트(최상위) 요소가 HTML이므로 HTML 요소에 스타일이 적용됩니다. 전체적으로 문서 안에 똑같이 적용할 스타일이 있을 경우 :root 선택자를 이용해 지정합니다. 2. :nth-child(n)와 :nth-last-child(n) 가상 클래스 선택자 웹 문서에서 특정 부분에 스타일을 적용하려면 class 나 id 선택자를 이용해 이름을 붙여주고 스타일을 정의하면 되지만 여러 개의 항목이 일렬로 나열되어 있는 경우 스티일을 지정할 항목이 ..