HTML CSS 자바스크립트 무작정 따라하기

Presentation on theme: "HTML CSS 자바스크립트 무작정 따라하기"— Presentation transcript:

1 HTML CSS 자바스크립트 무작정 따라하기

2 Chapter 03. 글자와 단락 다루기

3 HTML CSS 자바스크립트 무작정 따라하기
학습목표 다양한 텍스트 관련 태그를 알 수 있다. 순서 목록과 순서 없는 목록, 정의 목록의 특징을 알고 만들 수 있다. 스타일시트를 이용해 글자 속성을 조절할 수 있다. 줄간격과 단락 첫글자 들여쓰기를 조절해 보기 좋은 단락을 만들 수 있다. 단락을 정렬할 수 있다. 글자 간격과 단어 간격을 조절할 수 있다. HTML CSS 자바스크립트 무작정 따라하기

4 HTML CSS 자바스크립트 무작정 따라하기
단락 구분하기 – <p> 태그 <p> 태그는 단락(paragraph)을 만드는 태그(단락이란 앞뒤로 빈 줄이 있는 텍스트 덩어리) 닫는 태그를 생략해도 되지만 되도록 닫는 태그를 사용하는 습관을 들이는 것이 좋다. 예 <img src="images/tea3.jpg"> <p>레몬그라스(Lemongrass)<br> 레몬그라스는 ~(중략)~ 더욱 향기롭다.</p> <p>페파민트(Peppermint)<br> 페파민트는 ~(중략)~ 청량감이 더해진다.</p> <p>로즈마리(Rosemary)<br> 머리를 맑게하고 ~(중략)~ 해소에 좋다.</p> 세 개의 단락 주의 <p> 태그를 사용하면 <br> 태그를 두 번 적용한 것과 같은 효과가 나기 때문에 <p> 태그를 줄바꿈 태그로 사용하기도 하는데, 이것은 잘못된 방법이다. <p> 태그를 <br> 태그 대신 사용하게 되면 스타일 시트나 자바스크립트를 사용할 때 원하지 않는 결과가 생길 수도 있다. HTML CSS 자바스크립트 무작정 따라하기

5 HTML CSS 자바스크립트 무작정 따라하기
줄바꾸기 - <br> 태그 소스에서 아무리 줄을 바꿔 쓰더라도 브라우저 창에서는 한 줄로 표시된다. 실제로 웹 브라우저 창에서 줄바꿈이 되도록 하려면 <br> 태그를 사용한다. <br> 태그가 삽입된 위치에서 바로 줄이 바뀌게 된다. 예 <h3>캐모마일(Camomile)</h3> <p>캐모마일은 허브차의 대명사로 널리 알려진 허브로 가장 오래된 허브의 하나이다. <br> 캐모마일은 진정작용, 소화촉진작용이 뛰어나며 취침 전에 마시면 편히 잠들 수 있다. <br> 과로하고 스트레스에 쌓인 수험생, 샐러리맨에게 피로를 풀어주는 가장 좋은 음료수이다. <br> 임신이나 산후에 자궁을 강화 시켜주는 기능도 있어서 출산 후 꾸준히 마시는 것도 도움이 된다. <br> 캐모마일은 특히 발한작용이 있어 감기에 걸렸을 때 차로 마시거나, <br> 몸이 차가운 사람이 마시면 몸을 따뜻하게 해주는 성질을 가지고 있다.</p> HTML CSS 자바스크립트 무작정 따라하기

6 HTML CSS 자바스크립트 무작정 따라하기
다양한 텍스트 관련 태그들 pre - 사용자의 입력 형식을 그대로 보여준다 사용자가 입력하는 그대로 인식해서 브라우저에 보여준다. 글자 간격이 중요할 경우 사용하면 편리하다. 단, <pre> 태그를 사용할 때는 그 안에 <p>나 <br>처럼 텍스트 형식에 영향을 주는 태그를 사용하지 않는 것이 좋다. 예 <h3>캐모마일(Camomile)</h3> <pre> 캐모마일은 허브차의 대명사로 널리 알려진 허브로 가장 오래된 허브의 하나이다. 캐모마일은 진정작용, 소화촉진작용이 뛰어나며 취침 전에 마시면 편히 잠들 수 있다. 과로하고 스트레스에 쌓인 수험생, 샐러리맨에게 피로를 풀어주는 가장 좋은 음료수이다. 임신이나 산후에 자궁을 강화 시켜주는 기능도 있어서 출산 후 꾸준히 마시는 것도 도움이 된다. 캐모마일은 특히 발한작용이 있어 감기에 걸렸을 때 차로 마시거나, 몸이 차가운 사람이 마시면 몸을 따뜻하게 해주는 성질을 가지고 있다. </pre> HTML CSS 자바스크립트 무작정 따라하기

7 인용문 들여쓰기 - <blockquote> 태그
본문의 다른 텍스트보다 약간 들여써지므로, 다른 글들과 구별된다. <blockquote> 태그를 텍스트 들여쓰기 목적으로 사용하지 않도록 한다. 예 <h3>허브의 정의</h3> <h5> 요약 </h5> <p>약초, 향초,향신료나 약으로 사용되는 식물의 총칭</p> <h5> 설명 </h5> <blockquote>약초. 향초. 허브. 향신료나 약으로 사용되는 식물의 총칭. 허브는 푸른 풀을 의미하는 라틴어 <span style="color:red;">허바(herba)</span>에서 유래된 말로 지구상에는 2500여 종이 자생하는 것으로 알려져 있다. <span style="background-color:#ffff00">허브가 일반 식물이나 곡물류와의 가장 큰 차이점은 약리성분이 함유된 비타민과 미네랄이 풍부한 풀이라는 점</span>이며, 조리에서는 흔히 악센트를 주는 재료로 사용되기도 한다.</blockquote> HTML CSS 자바스크립트 무작정 따라하기

8 HTML CSS 자바스크립트 무작정 따라하기
기타 텍스트 태그들 <em> 태그 : 텍스트를 이탤릭체로 표시합니다 <strong> 태그 : 텍스트를 진하게 표시해서 강조합니다. <ins> 태그 : 공동 작업을 하거나 문서를 검토할 때 문서에 새로운 내용을 삽입했다고 표시하는 태그입니다. 삽입된 내용에는 밑줄이 생깁니다. <del> 태그 : 공동 작업이나 문서 검토할 때 기존 내용을 삭제했다고 표시하는 태그입니다. 내용 위로 가로줄이 그려집니다. <sup> 태그 : 위첨자를 표시합니다. <sub> 태그 : 아래첨자를 표시합니다. 예 <h3>녹차 초콜릿 만들기</h3> <p><em>재료</em> <br> 초콜릿 ²⁰⁰그램, 생크림 ₇₀그램, 버터 20그램, 녹차가루 적당량</p> <p><strong> 조리 과정</strong> <br> 1. 냄비에 생크림을 넣고 약간 끓기 시작하면 초콜릿을 넣고 잘 저어가며 녹여준다.<br> 2. 초콜릿이 잘 녹았으면 여기에 버터를 넣고 녹여 준다.<br> 3. 부드럽게 녹은 초콜릿은 랩을 깐 틀에 넣고 굳혀준다.<br> 4. 단단하게 굳은 초콜릿은 알맞은 크기로 잘라준다.<br> 5. 자른 초콜릿에 <del>코코아가루</del> <ins>녹차가루</ins>를 골고루 묻혀 완성한다.</p> HTML CSS 자바스크립트 무작정 따라하기

9 순서 목록 - <ol>, <li> 태그
순서 목록(ordered list)이란 말 그대로 각 항목을 순서대로 나열한 것이다. 어떤 과정을 순서대로 설명할 때 적당하다. 기본형식 <ol> <li> 항목1 </li> <li> 항목2 </li> ...... </ol> 예 <h5> 드라이 허브티 </h5> <ol> <li>티포트에 드라이 허브 3g을 넣는다. </li> <li>>끓는 물 200㎖를 붓고 뚜껑을 닫아 3~5분 정도 우린다. <br>허브티는 꼭 끓는 물로 우리는 것이 포인트다. </li> <li>거름망을 통과시켜 컵에 붓는다.</li> </ol> HTML CSS 자바스크립트 무작정 따라하기

10 HTML CSS 자바스크립트 무작정 따라하기
<ol> 태그의 속성과 속성 값 속성 설명 type 각 항목 앞에 붙는 번호의 형식 사용가능 값 : A(영문 대문자), a(영문 소문자), I(로마숫자 대문자), i(로마숫자 소문자) 기본값 : 따로 이 속성을 지정하지 않으면 숫자로 표시된다. start 각 항목 앞에 붙는 번호의 시작 번호를 지정한다. 예 <h3> 드라이 허브티 </h3> <ol type="I"> <li>티포트에 드라이 허브 3g을 넣는다. </li> <li>>끓는 물 200㎖를 붓고 뚜껑을 닫아 3~5분 정도 우린다. <br>허브티는 꼭 끓는 물로 우리는 것이 포인트다. </li> <li>거름망을 통과시켜 컵에 붓는다.</li> </ol> <br> <h3> 프레시 허브티</h3> <ol type="a" start="3"> <li>프레시 허브는 손가락으로 찢어 티포트에 넣는다. <br>한 번에 드라이 허브(3g) 2~3배 정도의 양이 적당하다. </li> <li>끓는 물 200㎖를 부어서 뚜껑을 닫아 3~5분 정도 우려낸다. </li> HTML CSS 자바스크립트 무작정 따라하기

11 순서없는 목록 - <ul>, <li> 태그
항목들의 순서가 중요하지 않을 때 사용한다. 항목 앞에 번호를 붙이지 않고 작은 원이나 사각형을 붙여서 표시한다. 기본형식 <ul> <li> 항목1 </li> <li> 항목2 </li> ...... </ul> 속성 설명 type 각 항목 앞에 붙는 불릿의 모양을 바꿀 수 있다. 사용할 수 있는 값 : disc(•), circle(◦), square(▪) 기본값 : disc(•) <h5>스트레스가 쌓일 때</h5> <ul> <li>캐모마일</li> <li>로즈마리</li> <li>페파민트</li> <li>라벤더</li> </ul> <h5>목이 아플 때</h5> <ul type="square"> <li> 쟈스민</li> <li> 페파민트</li> <h5>수험생을 위해</h5> <ul type="circle"> <li>레몬밤</li>> 예 HTML CSS 자바스크립트 무작정 따라하기

12 정의 목록 - <dl>,<dt>, <dd> 태그
사전에서 ‘단어’와 ‘단어 설명’으로 되어 있는 모습을 상상하면 그게 바로 정의 목록이다. 정의 목록은 ‘용어’ 부분을 지정하는 <dt> 태그와 ‘설명’ 부분을 지정하는 <dd> 태그로 구성된다. 기본형식 <dl> <dt> 용어 </dt> <dd> 용어에 대한 설명 </dd> ...... </dl> 예 <h3>허브의 정의</h3> <img src="images/leaf.jpg"> <dl> <dt> 요약 </dt> <dd>약초, 향초,향신료나 약으로 사용되는 식물의 총칭</dd> <dt> 설명 </dt> <dd>약초. 향초. 허브. 향신료나 약으로 사용되는 식물의 총칭. …(중략) </dd> <dd>허브가 일반 식물이나 곡물류와의 가장 큰 차이점은 …(중략). </dd> </dl> HTML CSS 자바스크립트 무작정 따라하기

13 HTML CSS 자바스크립트 무작정 따라하기
글꼴 다루기 – font 속성 font-family : 글꼴 지정 글꼴 하나만 지정할 수도 있고 두세개의 글꼴을 한꺼번에 지정할 수도 있다. 사용 가능 값 글꼴 이름 기본값 브라우저에 따라 다름 적용 대상 모든 요소 상속 여부 상속됨 백분율 사용할 수 없음 예 body {font-family:굴림} 예 body {font-family: 돋움, symbol} HTML CSS 자바스크립트 무작정 따라하기

14 HTML CSS 자바스크립트 무작정 따라하기
글꼴 다루기 – font 속성 2) font-size : 글자 크기 픽셀이나 포인트를 비롯해 여러 단위의 크기로 지정할 수 있고 백분율 크기를 사용할 수도 있다. 사용 가능 값 <절대 크기> | <상대 크기>| <길이값> | <백분율> 기본값 medium 적용 대상 모든 요소 상속 여부 상속됨 백분율 부모 요소의 크기 기준 ① 절대크기 : 키워드 중에서 선택 사용. 사용값: xx-small < x-small < small < medium < large < x-large < xx-large ② 상대크기 : 부모 요소의 글꼴 크기를 기준으로 상대적인 크기 지정 사용값 : larger 또는 smaller ③ 길이값 : 직접 글꼴 크기 지정. 12px이나 10pt가 보기 좋은 글씨 크기 ④ 백분율 : 부모 요소의 글꼴 크기를 기준으로 백분율값 계산 HTML CSS 자바스크립트 무작정 따라하기

15 HTML CSS 자바스크립트 무작정 따라하기
글꼴 다루기 – font 속성 3) font-sytle : 이탤릭체 지정하기 글자를 이탤릭체로 표현할 것인지의 여부를 결정한다. italic이나 oblique를 선택하면 글자가 이탤릭체로 표시된다. 사용 가능 값 normal | italic | oblique 기본값 normal 적용 대상 모든 요소 상속 여부 상속됨 백분율 사용할 수 없음 예 h2, h3 {font-style:italic} h2#txt1 {font-style:normal} HTML CSS 자바스크립트 무작정 따라하기

16 HTML CSS 자바스크립트 무작정 따라하기
글꼴 다루기 – font 속성 4) font-weight : 글자 굵기 글자의 굵기를 지정한다. 사용 가능 값 normal | bold | lighter | 100 | | 400 | 500 | 600 | 700 | 800 | 900 | 기본값 normal 적용 대상 모든 요소 상속 여부 상속됨 백분율 사용할 수 없음 100~900까지의 숫자는 클수록 더 굵다. 예 p {font-weight:normal} h1 {font-weight:700} strong {font-weight:bolder} HTML CSS 자바스크립트 무작정 따라하기

17 HTML CSS 자바스크립트 무작정 따라하기
글꼴 다루기 – font 속성 5) font-variant : 작은 대문자 영문 소문자를 작은 대문자로 표시 작은 대문자는 원래 대문자와 비슷하게 보이지만 크기가 작고 약간 다른 비율을 가지고 있다. 사용 가능 값 normal | small-caps 기본값 normal 적용 대상 모든 요소 상속 여부 상속됨 백분율 사용할 수 없음 예 H3 {font-variant:small-cpas} em {font-style:oblique} HTML CSS 자바스크립트 무작정 따라하기

18 줄 간격 지정하기 – line-height 속성
줄 간격이 너무 좁으면 내용을 한 눈에 보기 힘들기 때문에 줄간격을 적절하게 조절하는 것이 좋다. 사용 가능 값 normal | 숫자 | 길이값 | 백분율 기본값 normal 적용 대상 모든 요소 상속 여부 상속됨 백분율 요소 자체의 글자 크기 기준 예 p {line-height:1.2, font-size:10pt} p {line-height:120%, font-size:10pt} p {line-height:12pt, font-size:10pt} HTML CSS 자바스크립트 무작정 따라하기

19 글자 간격, 단어 간격 – letter-spacing, word-spacing
강조하고 싶은 글자나 <hn> 태그를 이용해 크게 표시한 글자들은 글자 사이의 간격을 조절해서 좀더 여유있게 표시하면 읽기 편하다. letter-spacing 속성 : 낱글자와 낱글자 사이의 간격 조절 word-spacing 속성 : 단어와 단어 사이의 간격 조절 사용 가능 값 normal | 길이값 기본값 normal 적용 대상 모든 요소 상속 여부 상속됨 백분율 사용할 수 없음 예 blockquote {letter-spacing:3px} h1 {word-spacing:0.5cm} HTML CSS 자바스크립트 무작정 따라하기

20 단락 다루기 – text 속성 1) text-indent : 단락의 첫 글자 들여쓰기
텍스트가 많은 문서일 경우 단락의 첫 글자를 조금씩 들여쓰면 단락 구분이 쉽게 되어 내용을 읽기 쉬워진다. 사용 가능 값 길이값 | 백분율 기본값 적용 대상 블록 단위 요소들 상속 여부 상속됨 백분율 부모 블록의 너비 기준 예 p {text-indent:3em} HTML CSS 자바스크립트 무작정 따라하기

21 단락 다루기 – text 속성 2) text-align : 단락 정렬하기
텍스트가 많은 문서일 경우 단락의 첫 글자를 조금씩 들여쓰면 단락 구분이 쉽게 되어 내용을 읽기 쉬워진다. 사용 가능 값 left | right | center | justify 기본값 브라우저에 따라 다름 적용 대상 블록 단위 요소들 상속 여부 상속됨 백분율 사용할 수 없음 예 p {text-align:center} HTML CSS 자바스크립트 무작정 따라하기

22 단락 다루기 – text 속성 3) text-decoration : 텍스트(단락)에 효과 주기
텍스트가 많은 문서일 경우 단락의 첫 글자를 조금씩 들여쓰면 단락 구분이 쉽게 되어 내용을 읽기 쉬워진다. 사용 가능 값 none | underline | overline | link-through | blink 기본값 none 적용 대상 모든 요소 상속 여부 상속할 수 없음 백분율 사용할 수 없음 none : 텍스트에 장식을 추가하지 않는다. underline : 텍스트에 밑줄을 추가한다. overline : 텍스트 위로 지나가는 줄을 추가한다. line-through : 텍스트 위로 가로지르는 줄을 긋는다. blink : 텍스트를 깜빡이게 한다. 익스플로러에서는 지원하지 않지만 넷스케이프와 파이어폭스에서는 동작한다. 예 p {text-decoration : underline} HTML CSS 자바스크립트 무작정 따라하기