친효스킨 커스터마이징에 대한 카테고리 입니다. 보통 요청에 의해 작성됩니다. 본문의 텍스트 줄 간격이 다소 좁다고 생각되시면 아래의 방법으로 조절이 가능합니다. 친효스킨의 CSS에서 아래의 코드를 검색하시기 바랍니다. "진짜본문" 이라고 검색하면 쉽게 찾을 수 있습니다. /* 진짜본문 (article_rep_desc) */ #contents .article { word-break: break-all; -webkit-word-break: break-all; padding: 20px; border: 1px solid #E5E5E5; border: 1px solid var(--subColor); font-family: "RIDIBatang", "Nanum Gothic" serif; font-size: 17px..
가끔씩 댓글로 CSS 설정 완료 후 적용이 잘 안된다는분이 계십니다. 그럴때는 간단하게 크롬에서 직접 비교해서 테스트 할 수 있는 방법이 있습니다. 당연히 크롬을 이용해서 해야 합니다. 물론 다른 브라우저에서도 해당 기능을 지원하겠지만 개인적으로는 크롬이 더 편하더군요. 이렇게 font-weight: bold; 를 입력해도 글씨가 두꺼워지지 않는다는 의견이 있었습니다. 과연 실제로 적용이 안 되는 건지 확인해 보는 방법은 직접 테스트해보는 방법일 겁니다. 티스토리 스킨의 CSS 편집을 통해 비교할 수 있지만 더 확실한 방법은 방금도 말씀드렸듯 크롬에서 검사기능을 활용하는 것 입니다. 해당 댓글의 본문을 확인했습니다. 현재 친효스킨에서는 B기능이 형광펜처럼 표시가 되는 기능으로 업데이트 되어 있습니다. 여..
CSS에서 미디어쿼리 (@media) 를 사용하면 쉽게 반응형으로 만들 수 있습니다. 특정 해상도 이상 혹은 이하일 때, 마크업 해둔 스타일로 변하도록 만드는 개념입니다. 이번에 친효스킨을 만들면서 더욱 확실히 개념을 정리할 수 있었습니다. 어떻게 이해했고, 어떤식으로 사용되어지는지 최대한 쉽게 설명을 드리겠습니다. 먼저 미디어쿼리를 마크업 할 때, 기준되는 해상도를 하나 정하셔야 합니다. 홈페이지 스타일 중 가장 만들기 쉬운 형태는 뭐가 있을까요? 저는 모바일 페이지라고 생각합니다. 블록요소가 그냥 세로로 쌓여있는 형태 입니다. 티스토리 반응형 스킨도 스마트폰에서 보면 세로로 정렬된 형태가 거의 대부분 입니다. 이는 모바일 해상도에서는 가로로 정렬할 수 있는 공간이 충분하지 않기 때문에 세로로 보여지게..
실험삼아서 해봤는데 사용이 가능합니다. 제목만 보면 어떤 뜻인지 잘 모를수도 있으니 (나중에 저 조차도 까먹을 수 있으니까) 간단한 예시를 들어서 한번 더 풀어서 설명하겠습니다. li:not(:last-child)::before { content: "#"; margin-right: 5px; } li 태그의 :not 이므로 ~이 아니다 라는 뜻이 됩니다. 여기에 (:last-child) 이므로 마지막 요소는 "~이 아니다" 라는 의미가 됩니다. 마지막에는 ::before 가 들어갔으므로 li 의 앞에 가상요소를 적용시킨다는 뜻이 되지요. {} 안의 내용을 살펴보니, # 기호가 적용됨과 동시에 오른쪽으로 5px 떨어지도록 되어 있습니다. 이제 한 마디로 표현해 보자면 다음과 같습니다. li의 맨 앞쪽에 #을..
코딩 순서에는 사실 정답이 있지 않다고 합니다. 보통 회사에서 사용하는대로, 혹은 사수가 즐겨쓰는 스타일대로 따라가게 되는데 통상적인데요, 그럼에도 불구하고 "우리 이것만큼은 이 순서대로 하면 참 보기 좋을 것 같다!" 하고 정해놓은 규칙이 있긴 한가 봅니다. 제가 다니고 있는 이곳 국비학원에서도 선생님께서 이렇게 작성해주면 좋다고 말씀해 주셨습니다. 오늘은 CSS에서의 코딩 순서에 대해 배워보겠습니다. 거두절미하고 CSS 코딩 순서는 아래와 같습니다. 01. display02. overflow03. float04. position05. z-index06. width & height07. margin & padding08. border09. font10. background11. etc (ex. opac..
폰트어썸(Font Awesome) 이라고 하는 아이콘 형태의 폰트가 있습니다. 이것을 이용하면 직관적이며 개성 넘치는 웹페이지를 구현할 수 있습니다. 이미지가 아닌 폰트로 적용되기 때문에 font-size 같은 스타일 요소로 크기를 변경할 수 있으며 폰트처럼 색상 변경도 가능합니다. CSS의 가상요소와 이 폰트어썸을 활용해서 작업이 가능합니다. 만약 한두개의 위치에만 폰트어썸을 사용해야 한다면, HTML 태그 안쪽에 폰트어썸에서 제공하는 i 태그를 그대로 붙여넣기를 하면 손쉽게 적용할 수 있지만, 꽤 많은 공통 태그 부분에 일괄적으로 적용해야 한다면 일일히 수동으로 넣는건 한계가 있습니다. 물론 수동으로 삽입하여 쓸 수도 있지만, 일괄적으로 변경하고자 할 때 꽤나 번거롭습니다. 그래서 가상요소를 이용한다..
브라켓은 대표적인 웹에디터 프로그램 중 하나입니다. 제가 자주 사용하는 기능 중 하나가 바로 "일괄변경" 입니다. 예를 들자면, #555 어두운 회색 계열인 16진수 색상코드가 적용된 모든곳을 다른 색으로 일괄 변경하고자 할 때, 해당 색상 부분을 드래그해서 선택 후, Ctrl + H 를 누르면 원하는 색상코드를 넣어 모두 변경이 가능합니다. 만약 브라켓에 오류가 발생한다거나 하필 급하게 메모장으로 수정을 해야 하는 경우라면 어떻게 해야 할까요? 한두개 적용이 된 상태라면 하나하나 수동으로 수정할 수 있지만, 생각보다 많은곳을 동시 수정해야 한다면 시간이 상당히 소요가 될 것입니다. 또한 빼먹고 미처 수정을 못하는 부분도 생길 수 있습니다. 그래서 :root 를 사용하게 됩니다. 이것은 변수를 만들어서 ..
CSS3로 다양한 삼각형을 만들 수 있습니다. 아니 표현한다는게 더 정확한 키워드겠네요. 웹코딩으로는 사각형이 기본 형태이기에 별도로 삼각형을 구성하는 태그는 없습니다. 저도 검색을 통해 알아보니 border로 삼각형을 만들 수 있는 방법을 알았고, 이것저것 해보니까 조금 이 바닥(?)이 어떻게 돌아가는지 이해가 됩니다. 우선 아래의 예제를 살펴보세요. 예제를 통해서 하나씩 설명드려보겠습니다. See the Pen CSS3 : Express Triangle by rgy0409 (@rgy0409) on CodePen. div 안쪽에 p태그로 번호를 부여했습니다. p태그에는 테두리를 주어서 중심이 어디인지를 확인할 수 있도록 마크업 해두었습니다. HTML과 CSS 버튼을 누르셔서 태그 요소들을 확인하실 수 ..
제목이 좀 매끄럽지 못한데, 이렇게 검색들을 많이 하실까봐서 정해봤습니다. 저 역시 이 방법을 찾으려고 무수히 많은 검색들을 했었습니다. 결국 답을 찾았고 저처럼 고생하시지 마시라고 깔끔하게 정리해서 올려보겠습니다. 구글 메인화면을 가보시면 구글 로고와 함께 바로 아래에 검색창이 있습니다. 그리고 검색창에는 "Google 검색 또는 URL 입력" 이라고 글씨가 표시되어 있습니다. 여기를 클릭하면 이 글씨가 사라집니다. 그리고 검색창을 제외한 바탕 아무곳에나 클릭을 하면 다시 이 글씨가 생성됩니다. 어떻게 처리를 하는 걸까요? 자바스크립트에서 처리를 하기도 하지만, 일단 저는 스크립트와 별로 친하지 않아서 이 방법까지는 모르구요, HTML5에서 새로 추가된 기능만으로도 구현할 수 있습니다. 먼저 아래의 예..
CSS3에서 백그라운드를 처리함에 있어서 추가적인 요소가 있습니다. 바로 contain과 cover 입니다. 이 각각의 의미는 한글로 풀이를 하자면, 원본비율과 중앙비율이라고 말씀드릴 수 있습니다. 현재 티스토리에서 제공하는 티에디션이라고 하는 꾸미기 플랫폼에 보시면 미리보기 썸네일 이미지를 원본비율, 중앙비율, 상단, 하단 등 기준에 맞춰서 보여지게 설정할 수 있는데, 여기에서 쓰이는 원본비율이 바로 contain 이고 중앙비율이 cover 입니다. 말로는 잘 모를 수 있으니 바로 예시를 들어보겠습니다. 먼저 예시에 사용할 이미지를 두개 올리겠습니다. 이렇게 두개를 올렸구요, 이제 이것을 활용해서 contain과 cover의 쓰임을 살펴보겠습니다. Background-size : contain Back..
지난 시간에 이어서 오늘은 그 응용편으로 3단 메뉴를 구성해 보겠습니다. 2단 메뉴에서 한단계 더 깊은 형태이기 때문에 크게 어렵지는 않을 것 입니다. 3단 메뉴이므로 ul 태그가 총 3개 들어갑니다. 어떤 식으로 들어가는지 살펴보시겠습니다. 어떤 메뉴인지 잘 감이 안 오시면 아래의 예시를 먼저 살펴봅시다. 이것이 메인 메뉴가 가로형태인 3단 메뉴 구성의 예시 입니다. 어떤 형태인지 아시겠죠? 그러면 먼저 html 마크업 상태를 살펴보겠습니다. 메뉴1 소메뉴1 소메뉴2 2단소메뉴1 2단소메뉴2 2단소메뉴3 소메뉴3 2단소메뉴4 2단소메뉴5 2단소메뉴6 메뉴2 소메뉴1 2단소메뉴7 2단소메뉴8 2단소메뉴9 소메뉴2 2단소메뉴10 2단소메뉴11 2단소메뉴12 소메뉴3 2단소메뉴13 2단소메뉴14 2단소메뉴1..
글씨 사이를 자간이라고 합니다. HTML 텍스트도 CSS 스타일을 사용해서 자간 조절이 가능합니다. 촘촘하게 만들수도 있으며, 넓게 넓게 떨어뜨릴수도 있습니다. 제목에 나온 letter-spacing 요소를 사용하시면 가능합니다. 바로 본론으로 들어가겠습니다. 내부스타일 방식을 사용했습니다. 본문의 p태그에 클래스값을 부여했습니다. 만약 수치값을 0으로 입력하면 어떤 변화가 생길까요? 아무런 변화가 없습니다. 해당 글꼴에 대한 기본 자간 스타일로 출력됩니다. 이번에는 letter-spacing 수치값을 10px을 입력했습니다. 어떤 변화가 생겼는지 출력해서 확인해 보겠습니다. 보시는 것 처럼 10px 씩 자간이 떨어졌음을 확인할 수 있습니다. 그러면 마이너스 값도 적용될까요? 그렇습니다. 아주 잘 적용됩..
오늘은 텍스트 데코레이션 요소들에 대해서 다시한번 짚고 넘어가는 시간 입니다. 전 시간에 아마 한번 언급했던 부분이 있을 수 있겠는데요 복습한다는 마음으로 다시한번 봐주시면 감사하겠습니다. a링크에 대해서 말씀 드릴 때 나왔을수도 있는 부분입니다. 복습겸 다시한번 살펴보도록 하겠고, 여기에 오늘의 주제인 text-decoration 태그 스타일에 대해서 다양하게 다뤄보도록 하겠습니다. 태그라는게 알수록 신기하고 재밌네요. 이런 맛에 코딩을 하는 것 같습니다. 먼저 text-decoration의 쓰임새를 간단히 살펴보기 위해서 위와같이 마크업을 해두었습니다. a 요소에서 많이 쓰이는 text-decoration: none; 부분도 등장하게 될 것입니다. 먼저 이렇게 마크업을 하면 당연히 a 링크가 걸린 텍..
지난시간까지 테이블 사용법에 대해서 계속 배워가고 있습니다. 오늘 시간도 그 연장선 입니다. 접근성을 위한 테이블 사용 방법에 대해서 알아가고 있는데, 오늘은 id와 header 요소에 대해서 배웠습니다. 사실 지금까지 접근성만을 고려해봤을때, 제일 이해가 쉬운 요소가 오늘 배운 id와 header 였습니다. 뭔가 체계적이라고 해야 할까요? 이해가 쉬웠습니다. 이 부분은 마치 요소에 class 혹은 id를 별도로 부여해서 스타일이나 스크립트를 주는 방식과 비슷한 원리였습니다. 본문인 body 부분만 캡쳐한 마크업의 상태 입니다. 보시면 th 요소 안쪽으로 headers 와 id 태그가 들어있는것을 확인할 수 있습니다. 이것은 그대로 이해하시면 될 것 같습니다. 예를 들어서, 62열을 보시면 스마트폰 라고..
이번 수업을 이해하는데 좀 시간이 걸렸습니다. 그리고 반드시 코딩을 함에 있어서 알아야 하는 건 아니지만, 그래도 알아두시면 좋은 것 같습니다. 뭐든지 많이 알면 좋은 것 같아요. 제목에서도 써놨듯 colgroup에 대한 내용, 그리고 thead, tbody, tfoot 에 대한 내용인데 우리가 다양한 태그를 구사하는 이유는 접속한 사용자를 위한 것 보다는 사실 웹 언어를 이해해야하는 검색엔진 때문이라고 말씀 드렸을 것입니다. 사실 표 테이블을 작성함에 있어서는 그냥 일반적인 tr, th, td 의 요소들만 알고 계셔도 충분히 만드실 수 있습니다. 하지만 이 내용에서 나오는 요소들의 태그를 활용하는 이유는 바로 접근성 때문인데요, 우리는 단순히 시각화된 내용을 통해 정보를 가져가지만, 세상에는 장애를 가..
오늘 배운 내용은 정의형 목록 태그에 대해서 입니다. 사실 이 부분은 쓰임새가 크게 많지는 않지만, 그래도 알아두면 유용하게 사용할 수 있을 것 같습니다. 출력되는 텍스트는 비슷해도, 안에 쓰이는 태그가 다른데, 그 이유는 바로 검색엔진 때문이라고 예전 시간에 말씀드린바 있습니다. 그러므로 겉으로 보여지는게 아닌, 태그가 어떻게 쓰여지는지에 대해 알아두시면 무척이나 요긴할 것입니다. 지금까지 배운 내용 중, 목록형 요소 (태그) 는 ol과 ul 이 있었습니다. 이들의 특징은 안에 li 태그가 반드시 들어온다는 것이었는데, 정의형 목록 요소도 마찬가지 입니다. dl 안쪽에 dt와 dd만 요소로 사용할 수 있습니다. dt 태그는 인라인 요소이며 또 다른 인라인 요소와 텍스트만 사용 가능하며, dd는 블록 요..
html CSS를 사용해서 테이블의 사이즈를 조정할 수도 있지만, 간단한 방법도 존재합니다. 바로 col 태그 입니다. col은 Column 의 약자로 "행" 이라고 하며, 가로를 의미합니다. 엑셀에서 위로 쭈욱 선택한게 바로 행 입니다. row는 "열" 이라는 뜻으로 가로를 뜻 합니다. 처음에 이게 좀 햇갈려서 테이블 태그 구성하는게 어려웠습니다. 아주 사소한 것이지만, 기본 개념을 잘 숙지하신다면 차후에 나오는 여러가지 응용 방법에 대해 능숙하게 해결하실 수 있을 것 입니다. 지난 시간에 배웠던 테이블 태그 구성과는 조금 다른게 눈에 보이실 것입니다. 우선 헤드 안쪽의 스타일은 신경 쓰시지 마세요. 단지 표의 스타일을 바꾼 정도일 뿐 입니다. 중요한건 본문의 table 요소들 입니다. 참고로 tabl..
오늘은 정말 중요한걸 배웠습니다. 그동안 저도 햇갈렸던 부분이었던 내용이었습니다. 역시! 모름지기 사람은 배워야 합니다. 고인물은 썩기마련! 두뇌에 맑은 지식의 샘물이 솟나아고 흐를 수 있도록 늘 끊임없이 알아가야 합니다. CSS 사용에 대한 부분이었는데, 햇갈린 부분이 id 와 class 의 사용이 어떻게 다른건지가 좀 개념 정리가 안되었었고, CSS 적용 범위 부분에 대해서도 좀 고민이 많았는데 드디어 이번 기회를 통해서 명확한 정리가 되었습니다. 그러면 오늘 배운 내용을 복습 겸 다시한번 정리해 놓도록 하겠습니다. 우선 기본 형태를 구성합니다. 본문 body 태그 안에는 p태그로 저렇게 글씨를 넣어봤습니다. 여기까지는 큰 어려움은 없습니다. 미리보기로 확인해 보겠습니다. 참고로 사용 프로그램은 브라..
HTML 문서에서 주소를 입력하는 방법입니다. 그냥 태그를 사용해서 작성하셔도 되지만, 굳이 address 태그를 사용하는 이유는 있을 것입니다. 이유는 바로 검색엔진 때문입니다. 보통 주소라던지 해당 블로그 혹은 사이트에 대한 정보는 HTML 중에서도 제일 하단에 많이 나옵니다. 이 부분을 FOOT 영역이라고 하는데, 여기에 보통 태그를 많이 사용합니다. 검색엔진도 바로 이런 부분을 찾습니다. 만약 어떤한 기업 주소를 인터넷에서 찾는다고 가정하면, 해당 검색엔진 알고리즘은, footer 안쪽의 address 태그를 먼저 찾습니다. 그렇기 때문에 특정 태그를 사용하는것이 유리하다고 할 수 있습니다. 그러면 이제 태그를 어떻게 사용하는지 알아보겠습니다. 생각보다 간단합니다. HTML 기본 구조를 작성하시고..
오늘은 간단하지만 정말 중요한 개념을 배웠습니다. HTML에서 코딩시 흔하게 사용하는 태그라던지, 태그라던지 하는 개념에 대한 부분이었습니다. 이 한 묶음의 태그를 "요소" 라고 말합니다. 예를 들자면, 티스토리는 참 재미있습니다. 를 사용했을 경우, 가 한쌍으로 묶였는데, 이것을 요소라고 보시면 됩니다. 요소에는 블록요소와 인라인요소라고 하는 개념이 존재합니다. 저도 처음 들었을 때는 대체 뭔소린가 싶었는데, 자세히 배워보니까 생각보다 이해하기 쉬운 것이었습니다. 한번 예를 들어서 알아보도록 하겠습니다. 브라켓으로 HTML 기본 구조를 작성합니다. 그리고 위와같은 태그로 한번 구성해 봤습니다. 헤드 태그 안쪽에 쉽게 설명을 위한 스타일 태그도 넣었습니다. 이렇게 하면 결과가 어떻게 얻어지는지 한번 보겠..
오늘은 특수문자에 대한 태그를 알아봅니다. 이 방법을 알아야 하는 이유는 바로 지금 작성하는 이런 강좌 관련 때문입니다. 예를 들자면 이라고 하는 태그를 문자 그대로 출력이 되게 하고 싶지만, 실제 HTML 문서상에서 P태그 안에서 작성하면 이 문자를 태그로 인식하기에 글씨는 보이지 않고 한 줄 내려쓰게 되는것으로 처리가 됩니다. 그래서 우리는 특수기호에 대한 태그를 알아야 합니다. 따라서 을 문자 그대로 HTML 문서에 출력하게 하려면 태그를 구성하는 ""에 대한 태그를 사용해서 표현하면 될 것입니다. 방금 위에서 설명한 내용입니다. 여기에서는 코딩 프로그램을 브라켓을 사용했습니다. 보시는 것 처럼 본문 안에 " 태그는 줄바꿈 태그이다." 라는 문구를 출력하고 싶은데, 과연 위의 스크린샷 내용대로만 작..
웹페이지 코딩을 하는 프로그램 중에서 브라켓 (Brackets) 이라고 하는 프로그램이 있습니다. 지금 다니는 학원에서도 브라켓을 통한 코딩을 했었고, 그 사용이 무척이나 편리하고 용이해서 좋았습니다. 브라켓에서 자주 사용하는 단축키가 몇 개 있습니다. 한번 알아보도록 하겠습니다. Ctrl + / : 선택하고자 하는 태그의 전체를 주석처리 및 해제 Ctrl + Shift + / : 클릭한 공간에 주석태그 생성 및 해제 Ctrl + D : 커서가 위치한 태그를 아래 행으로 그대로 복사 Ctrl + Shitf + D : 커서가 위치한 행 삭제 Ctrl + Shift + ↑ : 커서가 위치한 행 위로 이동 Ctrl + Shift + ↓ : 커서가 위치한 행 아래로 이동 Ctrl + Shift + L : Bea..
제목 태그인 H태그에 대해 알아보겠습니다. 만약 이 태그를 블로그와 비슷한 플랫폼에서 활용하시게 된다면 제목이라기 보다는 소제목에 가까울 수 있습니다. 참고로 검색엔진이 참 좋아하는 태그가 바로 H태그 입니다. 그만큼 중요한 태그이며 잘 활용한다면 분명 방문자는 늘어날 것이라고 생각합니다. (물론 본문 내용도 훌륭해야하겠죠!?) 그렇지만 적절히 활용하시기를 바랍니다. 검색 노출에 잘 반영된다고하여 자주 사용한다면 오히려 역효과를 불러올 수 있습니다. 사용법은 무척 간단합니다. 안에 구성된 텍스트 중에서 H태그로 감싸주시기만 하면 끝 입니다. 지금 위의 예시대로 한번 작성해 봤습니다. 어떻게 변하는지 한번 살펴보도록 하겠습니다. 사용하는 프로그램은 브라켓 (Brackets) 이라고 하는 편집 프로그램 입니..
html 문서를 살펴보면 항상 시작에는 이라고 하는 태그가 있습니다. 만들고자 하는 웹문서가 어떤 웹 표준 기술을 사용하고자 하는지를 정의하는 태그입니다. 지금은 HTML5 가 표준입니다. 따라서 html 문서의 첫 시작은 위처럼 정의하고 시작을 하는 편 입니다. 그리고 안에 존재하는 메타 태그 또한 비슷한 이유에서 작성하게 됩니다. 예전 시간에 HTML 기본 골격에 대해 설명드렸을 때, 헤드 부분이 사람의 얼굴과 비슷하다고 말씀 드렸습니다. (기억 나시나요? ㅠㅠ) 이 사람의 성격은 어떨지, 지금 무슨 생각을 하고 있을지, 인상은 어떤지 모두 머리 부분에서 파악할 수 있는 내용들 입니다. HTML 문서 또한 마찬가지로서 head 태그 안의 정보들로 이제 이 웹페이지는 이런 코딩을 가지고 있고, 이런 스..
주석이란 HTML 태그 코딩에 일종의 설명을 코멘트를 남기는 것 입니다. 제작자도 이 태그는 어떤 부분에서 어떤 식으로 적용되는 태그인지 햇갈릴수가 있습니다. 그래서 발자취를 남기는것이죠. 그것을 주석처리라고 합니다. 주석은 코딩의 설명을 위한 부분으로 실제 웹페이지에서는 노출이 되지 않습니다. 그러면 HTML 내에서 사용되어지는 일반 태그들, 그리고 스타일 (Style), 스크립트 (Script) 안에서 주석처리는 어떤식으로 할까요? 약간씩 차이가 있습니다. 위에 표시된 부분이 각 부분별 주석처리 방법입니다. 정리해 보자면 다음과 같습니다. ▶ 일반 태그 안에서의 주석 처리 /* 코멘트 */ ▶ 스타일 태그 안에서의 주석 처리// 코멘트 ▶ 스크립트 태그 안에서의 주석 처리 이렇게 사용할 수 있습니다...
지난 시간까지 우리는 태그에 대한 사용방법을 알아보았고, 또다시 P 태그에 스타일을 만들어서 색다르게 텍스트를 꾸미는 방법도 확인했습니다. 근데 P태그의 경우는 적용된 단락 전체를 가지고 활용하는 방법인데, 내부에 있는 특정 키워드에만 다른 스타일로 적용하는 방법은 없을까요? 이럴때 필요한것이 태그 입니다. SPAN태그는 단독 사용이 불가하며 여느 태그와 마찬가지로 마무리를 으로 해주셔야 하며, 사이의 텍스트에 적용시키는 방법입니다. 말로 설명하는건 한계가 있으니 예시를 통해서 알아보도록 합니다. 지난 시간에 예시로 든 진달래꽃 텍스트를 그대로 활용하도록 하겠습니다. "나 보기가 역겨워 가실 때에는 말없이 고이 보내 드리오리다." 에서 "말없이" 에만 스타일을 적용시켜보도록 하겠습니다. 방법은 간단합니다..
드디어 오늘부터 시작입니다. 새롭게 배우기 시작한 웹퍼블리싱 수업을 정말 잘 들어서 마스터 할 수 있도록 노력하겠습니다. 시작이 반 이라고 하였으니 전 반은 성공한 샘이네요. ㅎㅎ HTML과 일반 텍스트 구성의 책(문서)의 차이는 바로 링크의 유무라고 배웠습니다. 듣고보니 맞는 말 이네요. 첫 시간에는 태그에 대한 내용을 배웠습니다. 태그라는 단어는 아마 많이들 들어보셨을 것 같습니다. html을 구성하는 기본 단위가 바로 태그입니다. 웹 언어라고 하는데, 태그를 사용해서 웹 페이지를 구성하게 됩니다. 태그는 무조건 들어가는 기본 단위라고 생각하시면 될 것 같습니다. HTML 문서를 만드는 방법은 브라켓, 드림위버, 노트패드 등등의 프로그램을 사용하셔도 되지만, 윈도우 메모장으로도 충분히 작업할 수 있습..