html과 CSS에서 게시판 목록에 대해서 만들고자 할 때, table 태그 요소를 활용해서 만들곤 합니다. 그리고 ul, li 요소로도 얼마든지 꾸밀 수 있습니다. 여기에서는 li를 활용하여 테이블을 구성해 보겠습니다. 먼저 아래의 완성된 모습을 참고해 주시기 바랍니다. 이렇게 완성 됩니다. 그러면 본문 내용과 CSS 스타일 상태를 한번 살펴보겠습니다. 먼저 HTML body 영역 안의 마크업 상태입니다. 공지사항 내용날짜 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018-10-24 아무거라도 좋으니 내용을 입력하세요!!!2018..
지난 시간에 이어서 오늘은 그 응용편으로 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..
지난 시간까지 드롭다운 메뉴 구성하는 방법에 대해 알아봤습니다. 오늘은 2단 메뉴가 한꺼번에 나오는 방법에 대해서 어떻게 진행하는지에 대해 알아볼 것입니다. 무슨 뜻이냐면, 1단 li 에 마우스를 오버하면 해당 li 의 메뉴에 대한 또 하나의 2단 ul li 가 나타나게 됩니다. 예를 들자면 아래와 같은 경우 입니다. 이해 되시나요? 이런 경우 입니다. 아마 이와같은 홈페이지 메뉴 구성은 심심찮게 보셨을 것입니다. 그러면 어떻게 구현되는지 살펴보도록 하겠습니다. 모바일에서 보시는 분들도 계실 수 있으니, 최대한 이미지가 선명하게 보일 수 있도록 세로로 배치하겠습니다. 참고로 이번 강좌를 이해하기 위해서는 먼저 1단 메뉴부터 구상하는 방법에 대해서 학습하시면 좋습니다. 해당 내용을 아래에 올려두겠으니 먼저..
지난 시간에 이어서 이번에는 2단계 메뉴를 만드는 방법입니다. 이전시간에 만들었던 메뉴를 그대로 활용해서 진행합니다. 따라서 이번 강좌를 이해하시는데 있어서 전 시간의 가로 형태의 1단 메뉴를 먼저 익히시고 이 글을 보시는것이 도움이 됩니다. 빠르게 참고하시라고 아래에 관련글을 남기도록 하겠습니다. CSS ul li 사용하여 가로형 1단 메뉴 리스트 만들기 형태는 이렇습니다. 먼저 1단 메뉴는 가로 형태이고, 마우스를 올렸을 때, 세로 형태로 2단 리스트가 나오게 만드는 방법입니다. 조금 복잡하겠지만 원리만 이해하면 크게 어려운 부분은 없습니다. 그럼 한번 살펴보겠습니다. 먼저 HTML 마크업 상태 입니다. 보시면 li 안쪽에 다시한번 ul이 자리잡고 있는 것을 알 수 있습니다. 그리고 1단 ul 과 2..
오늘은 HTML + CSS 에서 가로형태의 메뉴를 만들어 보겠습니다. 홈페이지나 블로그에서 심심찮게 살펴볼 수 있는 항목입니다. 주로 ul li 요소를 가로로 배치하여 사용하게 됩니다. 예전에 div를 가로 정렬하는것에 있어서 float 요소를 사용한다고 배운 바 있습니다. 그리고 float을 사용하셨다면 반드시 이것을 해제해 주셔야 다음에 배치될 태그 요소들이 정상적으로 제 위치에 놓여지게 됩니다. 한번 알아보겠습니다. 먼저 HTML 마크업 상태 입니다. 현재 style을 외부스타일로 지정했습니다. head 안쪽에 link 태그를 사용해서 스타일을 불러와 인식하는 방법입니다. body 본문을 살펴보시면 ul 그리고 li 태그를 써서 메뉴를 4개 만들었습니다. 그리고 ul 요소를 menu1 이라고 하는 ..
티스토리 스킨을 뜯어보면 가장 많이 볼 수 있는 태그 요소 중 하나가 바로 position 위치에 대한 설정 입니다. 대체로 두 가지 요소를 많이 씁니다. relative 와 absolute 입니다. 이 두개의 차이를 간단히 살펴보는 시간을 갖도록 하겠습니다. 배우긴 했지만 아무래도 많이 사용해봐야 확실히 알 수 있을 것 같습니다. 우선 이렇게 코딩을 해봤습니다. 본문을 살펴보시면 box라고 하는 이름을 가진 div를 만들었고 그 안에 p태그로 세개의 문단이 있습니다. 그리고 각 p태그의 스타일을 만들었습니다. p태그는 블록요소이므로 아래로 쌓이게 됩니다. div 안쪽에 이미지로 백그라운드를 넣었고 크기값을 가지고 있습니다. 한번 결과물을 살펴보겠습니다. 그렇습니다. 이렇게 출력이 될 것입니다. 이제 p..
div는 블록요소 이므로 만들면 세로로 쌓이게 됩니다. 이 요소들을 가로로 정렬하기 위해서 float 속성을 사용합니다. float: left; 혹은 right를 작성하면 가로로 배열됩니다. 문제는 이 속성을 기준으로 뒤에 생성될 모든 div가 싹 다 가로정렬 하려는 성질을 갖게 됩니다. 그래서 float을 이제 그만두라는 뜻에서 해제를 진행하게 되는데, 오늘은 가상요소라는 것을 만들어서 해제하는 방법에 대해 배웠습니다. 저는 직업학교에서 배우는 예제들을 다 한번씩 직접 마크업 (코딩) 해보고 그 결과를 바로 확인하니 어떻게 작용하는지 알 것 같습니다. 여러분들께서도 이 부분을 직접 작성해 보시고 어떤 변화가 생기는지 경험을 통해서 깨달으신다면 더욱 기억에 오래 남게 될 것 같습니다. 우선 스타일 부분입..
직업학교에서 HTML과 CSS를 배우고 있는데 상당히 재밌습니다. 햇갈렸던 부분, 개념정리가 다소 안 되었던 부분, 어려웠던 부분들을 하나하나 터득해가며 내 것으로 만드는 재미가 쏠쏠하다고나 할까요? 마치 퀘스트를 받고 수행하며 보상을 얻는 기분입니다. 레이아웃 기초 부분을 배우는데 어려웠던 div에 대해서도 하나하나 개념을 적립해 나가고 있습니다. 그리고 중앙정렬에 대해서도 이제 확실히 알았습니다. 기준이 뭐가 되어야 하는지, 왜 이렇게 하면 중앙정렬이 되는지 말이죠. 원리는 간단합니다. div같은 블록요소는 반드시 크기값을 가져야 합니다. h1이나 p태그는 블록요소이고 텍스트를 작성하면 알아서 가로사이즈의 크기가 정해집니다. 그렇기 때문에 중앙정렬인 text-align:center; 를 진행하면 한방..
오늘은 정말 중요한 요소를 배웠습니다. 레이아웃을 꾸미는데 가장 기본이 되는 div 블록 요소를 가로로 정렬하는 방법입니다. h1 이나 p태그, div 등의 태그는 모두 블록요소라고 합니다. 특별히 크기를 지정하지 않았어도 크기값을 가지며, 줄바꿈 현상이 일어나는 요소를 블록요소라고 하지요. 때문에 가로로 정렬하려면 또 다른 CSS 스타일 태그를 사용해야 합니다. 이 때 사용하는 요소가 바로 float 입니다. 크게 두 가지 속성이 있습니다. float: left; → 왼쪽부터 가로로 정렬 float: right; → 오른쪽부터 가로로 정렬 이렇게 사용 되는것이 대부분이며, 각 요소를 사용하면 어떻게 되는지를 한번 살펴보겠습니다. 먼저 본문인 body 안쪽에 div 3개를 만들었습니다. 각각 클래스값을 ..
이번에는 HTML에서 백그라운드 (배경) 에 이미지를 넣는 방법입니다. 색을 부여하는 방법은 background : #원하는 16진수 색상코드 ; 를 CSS에서 부여하면 간단히 해결 됩니다. 이미지는 과연 어떻게 넣을까요? 알아보겠습니다. 먼저 백그라운드 색상을 지정하는 방법입니다. 보시는 것 처럼 원하는 선택자를 입력하시고, 속성 요소에 화살표가 가리키는대로 마크업 하시면 됩니다. 16진수로 색상을 입력하거나 이미 지정된 색 명칭으로 넣으시면 됩니다. 그러면 이렇게 백그라운드에 입력한 색상이 표현 됩니다. 이제 이미지를 넣어보겠습니다. 이미지 CSS 태그는 위에 나온대로 진행하시면 됩니다. 중요한건 경로를 꼭 제대로 입력하셔야 한다는 것 입니다. 또한 url 다음에 오는 괄호는 절대 붙여써야 한다는 것..
오늘은 CSS 스타일 중 border 태두리 속성에 대해서 배웠습니다. 사용법은 간단합니다. 테두리가 어떤 형태로 나타나는지, 그리고 해당 요소는 무엇인지만 기억해 주시고, 적절한 문장을 강조하고자 할때, 한 문단을 감싸고자 할 때 적시적소에 쓰시면 되겠습니다. 우선 마크업 상태를 확인해 주시기 바랍니다. 그리고 본문 body 안쪽에는 단락 요소인 p태그를 사용했고 짧은 문장을 몇 개 적었습니다. 그리고 p태그는 class 값을 부여했습니다. 각 클래스별 스타일을 내부스타일 방식으로 head의 style 에서 지정하였습니다. 보시면 border 속성값이 대략적으로 3가지 묶음 정도로 보여지게 되는데 각 요소의 역할은 다음과 같습니다. border : { 테두리 두께, 테두리 형태(디자인), 테두리 색상 ..
HTML 문서 내의 텍스트 문장의 줄 간격을 조절하는 CSS 요소가 있습니다. line-height 를 사용하시면 됩니다. 단위는 px, %, em을 사용하시면 됩니다. 참고로 1em은 100%를 의미합니다. 0.5em은 50%를 뜻하게 되는 샘 입니다. 역시 말로는 이해하기가 어려우므로 바로 사용 방법을 배워보겠습니다. 본문 전체에 적용하도록 내부스타일로 저렇게 마크업을 해두었습니다. 근데 살펴보시면 수치에 대한 단위를 표시하지 않았습니다. 이 경우는 "배"를 뜻합니다. 즉 예시에서 마크업의 의미는 1.5배라는 뜻 입니다. 결과물은 이렇게 출력됩니다. 만약 line-height 요소가 없다면 따닥 따닥 문장 사이사이가 붙어있어서 가독성이 떨어지게 됩니다. line-heignt 사용으로 가독성을 올릴 수..
글씨 사이를 자간이라고 합니다. HTML 텍스트도 CSS 스타일을 사용해서 자간 조절이 가능합니다. 촘촘하게 만들수도 있으며, 넓게 넓게 떨어뜨릴수도 있습니다. 제목에 나온 letter-spacing 요소를 사용하시면 가능합니다. 바로 본론으로 들어가겠습니다. 내부스타일 방식을 사용했습니다. 본문의 p태그에 클래스값을 부여했습니다. 만약 수치값을 0으로 입력하면 어떤 변화가 생길까요? 아무런 변화가 없습니다. 해당 글꼴에 대한 기본 자간 스타일로 출력됩니다. 이번에는 letter-spacing 수치값을 10px을 입력했습니다. 어떤 변화가 생겼는지 출력해서 확인해 보겠습니다. 보시는 것 처럼 10px 씩 자간이 떨어졌음을 확인할 수 있습니다. 그러면 마이너스 값도 적용될까요? 그렇습니다. 아주 잘 적용됩..
오늘은 텍스트 데코레이션 요소들에 대해서 다시한번 짚고 넘어가는 시간 입니다. 전 시간에 아마 한번 언급했던 부분이 있을 수 있겠는데요 복습한다는 마음으로 다시한번 봐주시면 감사하겠습니다. a링크에 대해서 말씀 드릴 때 나왔을수도 있는 부분입니다. 복습겸 다시한번 살펴보도록 하겠고, 여기에 오늘의 주제인 text-decoration 태그 스타일에 대해서 다양하게 다뤄보도록 하겠습니다. 태그라는게 알수록 신기하고 재밌네요. 이런 맛에 코딩을 하는 것 같습니다. 먼저 text-decoration의 쓰임새를 간단히 살펴보기 위해서 위와같이 마크업을 해두었습니다. a 요소에서 많이 쓰이는 text-decoration: none; 부분도 등장하게 될 것입니다. 먼저 이렇게 마크업을 하면 당연히 a 링크가 걸린 텍..
오늘 수업은 매우 알찼습니다. padding (패딩) 그리고 margin (마진) 에 대해서 다시한번 그 개념을 짚는 시간이었습니다. 또한 다양한 쓰임새를 파악할 수 있었습니다. 예전에 이게 너무 햇갈려서 사용하는데, 그리고 수정하는데 어려움이 많았지만 지금은 입맛대로 꾸밀 수 있을 것 같습니다. 티스토리를 입문하시고, 조금 용기내어 스킨을 수정하려고 하면 도무지 알 수 없는 코딩들 때문에 어떻게 손을 대야 좋을지 몰랐다면, 지금은 이제 어떤 부분을 고쳐야 하는건지에 대한 감이 조금씩 오고 있습니다. 두리뭉실하게 알고 있던 부분이 더 확고해졌습니다. 말이 길어졌군요. 바로 본론으로 들어가도록 하겠습니다. padding 개념 및 사용 방법 먼저 padding에 대한 개념과 간단한 사용 방법을 알아보겠습니다..
오늘은 폰트 스타일을 적용하는 다양한 태그 요소들을 배웠습니다. 그리고 간단하게 줄여서 사용하는 방법에 대해서도 알게 되었습니다. 줄여쓰는 방법은 아직 익숙하지 않아서 자주 써야 기억에 남을 것 같아요. 확실한건 줄여서 표현하는 방법이 더 간단해서 코딩 무게를 줄임에 있어서 도움이 될 것 같습니다. 지금 보시면, 빨간색 박스친 부분이 일반적으로 사용하는 폰트 스타일 요소들 입니다. 하나하나 설명을 하겠습니다. font-family → 글꼴을 지정합니다.font-size → 글자 크기를 설정합니다. 단위는 px 입니다.font-weight → 글자의 굵기를 설정합니다. 보통 bold 를 사용합니다.font-style → 기울이기 등의 글자 스타일을 지정합니다.font-variant → 영어 작성 시, 작은..
오늘은 각 요소에 클래스값을 부여하고, 이들을 모두 그룹화해서 일괄적으로 스타일을 적용시키는 방법에 대해서 배웠습니다. 여러개의 클래스값을 사용하는 경우에, 이들 중 일부 몇 클래스만 동일한 스타일을 적용시키고 싶다면 그룹으로 묶어서 관리할 수 있습니다. 내부스타일로 적용한다고 했으니, head 안쪽에 style 영역을 따로 만들어 줍니다. 그리고 본문을 먼저 작업을 합니다. 지금 보시면 h1부터 h5까지 다양한 요소들로 텍스트를 작성했는데, 제목 부분인 h1을 제외한 나머지에 class 값을 부여했습니다. 각 클래스값은 다릅니다. 이 모든 클래스값에 동일한 스타일을 적용시키고자 한다면 어떻게 할까요? 간단합니다. 콤마(,)를 이용하여 그룹화를 만들고 일괄 적용할 수 있습니다. 위에 빨간색으로 표시된 부..
이 부분은 정말 중요합니다. 여러분들께서 홈페이지를 만드시려 한다거나, 저처럼 티스토리 스킨을 제작해보려 하신다면 꼭 알고 있어야 하는 부분입니다. 꼭 스킨을 만들지 않더라도, 현재 사용하는 스킨이 편집 수정이 가능한 것이라면 원하시는대로 입맛대로 스타일을 바꾸거나 추가해서 사용할수도 있을 것입니다. 그러기 위해서는 꼭 오늘 이 글에서 다루는 부분을 이해하고 넘어가야 합니다. 타입(태그) 선택자 / 아이디 선택자 여기에서는 내부스타일 방식으로 진행합니다. 현재 본문 영역에는 p태그와 div 요소로 텍스트 두 문장을 작성했습니다. 그리고 head의 스타일 요소 안쪽에 이들에게 각각 글씨 색상을 변경하도록 스타일 지정을 했습니다. p {color: blue;} 여기에서 p가 바로 선택자가 됩니다. 결국 이 ..
예전에 한번 CSS 스타일에 대해서 언급한적이 있는데, 저도 언제 그랬는지 까먹었으니 다시한번 개념을 정리하고자 합니다. HTML에서 스타일을 적용하는 방법은 통상적으로 3개가 있습니다. 하나는 태그에 직접 스타일을 주는 인라인 방식, 두번째는, head 요소 안에 style을 지정하는 내부스타일 방식, 마지막은 아예 CSS 만 따로 모아둔 파일을 만들어서 외부에서 불러와서 적용하는 외부스타일 방식 입니다. 인라인 방식 지금 보시는 마크업 중 빨간색 표시가 된 부분이 인라인 방식 입니다. 태그 요소에 직접 스타일을 부여해서 적용하는 방법입니다. 스타일 적용 방법 중 가장 최우선으로 적용됩니다. 내부 방식 노란색 표시 부분이 내부스타일 방식으로 적용된 모습 입니다. head 요소 안에 스타일을 따로 만들고..
오늘은 정말 중요한걸 배웠습니다. 그동안 저도 햇갈렸던 부분이었던 내용이었습니다. 역시! 모름지기 사람은 배워야 합니다. 고인물은 썩기마련! 두뇌에 맑은 지식의 샘물이 솟나아고 흐를 수 있도록 늘 끊임없이 알아가야 합니다. CSS 사용에 대한 부분이었는데, 햇갈린 부분이 id 와 class 의 사용이 어떻게 다른건지가 좀 개념 정리가 안되었었고, CSS 적용 범위 부분에 대해서도 좀 고민이 많았는데 드디어 이번 기회를 통해서 명확한 정리가 되었습니다. 그러면 오늘 배운 내용을 복습 겸 다시한번 정리해 놓도록 하겠습니다. 우선 기본 형태를 구성합니다. 본문 body 태그 안에는 p태그로 저렇게 글씨를 넣어봤습니다. 여기까지는 큰 어려움은 없습니다. 미리보기로 확인해 보겠습니다. 참고로 사용 프로그램은 브라..
[CSS기초] 전체선택자 및 하위,자식 선택자 살펴보기 CSS스타일시트를 열심히 배우고 있는 중이지만....배울수록 모르는 것 투성이...ㅠ_ㅠ 그치만, 포기하지 않고, 어떻게든 알아내려고 하다보면이제 완벽하게 나의 것으로 만들 수 있게 되겠지요^^ 지금까지 배운 HTML+CSS 기본 스타일시트 태그들을 바탕으로,개인홈페이지를 하나 만들어 봤는데요~나중에 자세히 포스팅 한번 해볼께요^^ 그리고, 태그소스도 별도로 올려놓을테니,혹시 참고하실 분들은 참고하시면 좋을 것 같아요. 이번 포스팅은, CSS 스타일시트 중에서,전체 선택자, 하위 선택자, 자식 선택자에 대한 실습시간 이에요. 전체선택자라 함은, 말그대로, 안에 들어갈 모든 스타일들을 전체적으로 적용하게 된다 라는 말이고,하위선택자는, 특정 하위부분만..
[CSS 기초] CSS 스타일 태그관련 글씨에 효과주기 요즘....웹관련 소스를 배우고 있는거...아시는분은 아시죠?^^; 그중에서도, CSS관련하여 배워나가고 있는 가운데... 슬슬...머리에서 쥐가 나려고 해요...ㅠ_ㅠ 그래도, 최대한 집중해서 열심히 배울래요! 한개라도 배우겠다는 마음가짐으로 달려들믄, 못할것도 없지~! 암!!! 뭐 이렇게 어렵게 정의를 구현해 놓았는지...에흉~! ㅠ_ㅠ 뭐...일단 우선 제가 확실히 아는 부분부터 꾸준히 이렇게 CSS 스타일태그 포스팅을 하도록 할께요~ 제가 이분야 전문의가 아니기 때문에;;; 질문은 하셔도...답변이 없을거에요...ㅠ_ㅠ 아주 기본만~! 기본만~! 그리고, 중요한것은! HTML과 CSS는 그냥 그때그때 모르는건 검색해서 찾아서 배우시면 되는 것..
[CSS 기초] DIV 태그를 이용하여 프레임 나누기 안녕하세요~ 친절한효자손 이에요. CSS를 이용하여, 프레임을 나누는 실습을 하고 있는데요,이거 생각보다 쉽지만은 않지만, 재.미.있.네.요! ㅎㅎㅎ 역시, 마음을 비우고, 하나하나 차근차근 배운다고 생각하고 진행하면 참으로 쉽고 재밌게 배우지 않겠느냐~라는 것이 개인 견해에요~ ㅎ 이번에는, CSS기초중, DIV태그를 써서, 웹 안쪽에 프레임을 나누는 방법을 학습했는데요,호오...확실한건, HTML TABLE 태그보다는! 쉽다는것~! (개인생각?) 한번 그럼 차근차근 진행해 보도록 할까요???? 다시한번 말씀 드리자면, HTML과는 다른특징 중 하나가, CSS 속성들은, 모두 안쪽에 들어오고,본문인 에서 자유롭게 속성을 끌어 쓰면 되기에, CSS가 ..
[CSS 기초] CSS 스타일시트 태그사용하여 폰트 효과 넣기 안녕하세요~ 친절한효자손 이에요~! 오늘부터, CSS 기초도 배우기 시작을 했어요;;;그렇다고 벌써 HTML을 마스터 한건 절대 아니구요~! HTML태그를 숙지하다가, CSS 태그를 한번 배워봤는데, 오~! 이거 이래서 CSS태그를 쓰는구나~ 싶더라구요^^; 사실, 제가 HTML 그리고 CSS를 배우는 이유도, 뭐...이걸로 홈페이지를 만들려고 그러는게 아니라~!제가 블로그를 운영하잖아요^^; CSS 태그를 배워서 응용해 보려고 하는거에요~! 스킨이랑 뭐 기타 등등등;;; 할 줄 몰라서도 그렇고, 일단볼 줄 모르니까요^^; 까막눈이죠~! 어쨌든, 오늘 배운것을 바로바로 포스팅!!!포스팅만이 살 길이닷~! 자~! 참고하실 점은, HTML과 CS..