몸을쓰라곰 몸을쓰라곰

주제 : CSS교재 : 생활코딩 내용 :  14강 CSS 코드의 재사용 1. 지금까지는 2.html파일에서 반응형 디자인이 가능하도록 했지만, index.html / 1.html / 3.html 에서도 모두 반응형 디자인이 가능하도록 하려고 한다. 그런데 style태그를 일일히 복붙해야 해서 불편...  Q. 이처럼 공유하고 있는 양식을 갑자기 수정해야할 때, 어떻게 효율적으로 처리할 수 있을까? A. '중복의 제거'를 통해 가능하다~ 지금부터 찬찬히 설명해주겠다!1) style.css 라는 파일을 만들어서, 1.html의 style 태그에 속해있는 효과를(style태그는 빼고!) 모두 복붙해주기 2)기존 파일의 style 태그를 지워버리고, 태그를 이용해  style.css 파일에 저장된 CSS를 다운..

주제 : CSS 교재 : 생활코딩 12강 미디어 쿼리 소개 1.반응형 디자인화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 움직이는 디자인!미디어 쿼리 코드 @media(~)를 사용해서 효과를 적용할 수 있다.위 사진의 예시처럼 @media(min-width:800px) {   div {     display:none;}}과 같이 설정하면, 화면 가로길이가 800보다  크면, 화면에서 사라지는 효과가 적용된다!웹페이지 검사도구창을 통해 효과가 제대로 적용되는지 확인해보자!*검사도구창 들어가기 : 내가 만든페이지->오른쪽버튼클릭 후 검사 클릭->화면크기를 늘렸다 줄일때 화면크기가 픽셀단위로 나옴 이처럼 화면가로크기가 최소 800픽셀부터는 div태그에 효과가 적용되고 @media(min-width:80..

주제 : CSS 교재 : 생활코딩 내용 10강 그리드 1. 디자인만을 위해서 존재하는 태그가 있다?!div : 디자인이라는 목적을 위해서 어떤 의미도 존재하지 않는 태그, division의 약자, block line element로 화면전체사용span : 위와 같은 목적으로 고안된 태그, inline element로 콘텐츠구역만 사용 두개의 태그를 나란히 배치하고 싶거나 어떤 배치를 하고 싶으면 부모태그가 필요 위와 같이 div태그와 div태그를 나란히 배치하기 위해 div id="grid"라는 부모태그를 활용했다!*이 때 grid는 id값을 부여하기 위한 임시명칭일뿐, 어떠한 기능을 담고 있지는 않다!!!! 2. 좀 더 복잡한 태그간 레이아웃 정리법display효과의 grid 속성값 사용, grid-t..

주제 : CSS 교재 : 생활코딩 내용 8강 박스모델 1. border를 통해 태그의 부피감 확인 및 설정하기h1태그는 화면전체를 쓰고 있음(줄바꿈)a태그는 줄바꿈이 되지 않고 다른 컨텐츠들과 같은 라인에 위치why? 왜 어떤 태그는 자동으로 줄바꿈이 되어 구현되는데, 어떤 태그는 그렇지 않은걸까?- h1태그는 제목태그이기에 화면전체를 쓰는게 더 편리함-반대로 a(링크)태그가 화면 전체를 쓴다면 링크 앞뒤에 있는 컨텐츠가 줄바꿈이 되면 불편함. 따라서 줄바꿈이 되지 않고 딱 자기 콘텐츠 크기 만큼만 쓴다. 이러한 개념을 시각적으로 더 확인해보자! 테두리를 그려서 태그의 부피감을 확인해볼까?style태그와 border효과를 이용해서 확인해보자!*border 효과 및 사용법border효과 = 테두리borde..

주제 : CSS 교재 : 생활코딩  내용 : 1. css 효과 1-1.효과2 : text-decoration: none;  : 텍스트의 모든 꾸밈(ex)밑줄)이 없어지게 된다. 1-2.효과3 : font-size:~px; : 텍스트의 크기를 px단위로 조절 1-3효과4 : text-align:~; : 텍스트의 정렬에 대한 설정(왼,중,오) 2. html 속성class : class 속성이 적용된 텍스트들을 하나의 그룹으로 묶는다.ex) class="saw"이라면 saw(보았던=접속했던) 텍스트를 하나의 그룹으로 묶게 됨.  3.선택자 응용3-1.saw{~} : class속성값이 saw인 텍스트를 ~과 같이 디자인한다.ex) .saw{color:gray;} saw로 그룹화 된 텍스트의 색을 회색으로 설정 ..

주제 : CSS 교재 : 생활코딩 내용1.CSS는 웹페이지를 효율적으로 디자인하기 위한 도구이다.(또한 CSS로 인해 웹페이즈의 디자인코드(CSS)와 정보코드(HTML)를 선명하게 구분할 수 있게 되고, 서버가 필요한 코드(특히HTML)를 효과적으로 구분*인식가능!) 2.웹페이지에 css 삽입하는 방법 1.style태그 : css태그 - 예를들어 head태그로 안에 라고 치면, a태그에 들어가는 내용에 한해서 검정색으로 수정하겠다는 의미1-2.선택자 : 2번의 예시 에서, a{ }는 style태그를 누구에게 지정할지 정해주는 '선택자'이다. +style속성에서는 style 속성이 위치하고 있는 태그에 효과를 줄 것이기에 선택자를 사용할 필요가 없음. 1-3.효과 : a {color:black;}에서, ..

주제  : HTML 실습목표 구체적인 디테일보다(CSS와 JavaScript에서 더 배울테니)1) 게시판 메뉴에 따른 페이지 구분2) 영상삽입 및 의견 의사소통 기능에 집중하여 만들어보자! 부딪힌 문제 - 해결과정문제1. disqus 댓글기능을 이용해 참여자가 여러 질문에 답을 하게 하려고 했는데.. 코드를 여러번 달아도 구현되는 댓글창은 하나뿐이다.. ㅠ 문제2. 서칭을 해보니 disqus의 댓글기능은 한페이지에 하나가 제공된다는 것을 알게 되었다. 그래서 livere 사이트의 댓글기능을 추가하여 2개의 댓글창을 운영하려고 했으나.. 내가 만든 웹페이지를 입력하는 창에서 에러가 뜬다.문제3. 내가 만든 웹페이지가 서버를 통해 호스팅된 것이 아니라 적용이 안되는걸까?하는 생각이 문득 들어 깃허브를 이용해..

주제  : HTML 교재 : 생활코딩 내용 1.댓글달기1)댓글 다는 것은 지금 수준으로는 불가, 따라서 disqus라는 사이트(https://disqus.com/)의 공유소스를 활용*disqus 회원결제를 해야한다는 안내창이 뜨는데, 무료 회원으로도 충분히 이용할 수 있음!2)댓글코드를 활용하려면 웹서버를 통해서 써야함(이 때 live sever활용) 이외에 영상넣기, 채팅기능도 정리해놓았는데.. 날라가 버렸다 ㅠㅠ