본문 바로가기

전체 글

 (10)
박스를 옮겨라 ! 오늘은 지난 시간에 배운 margin속성으로 text-align 속성처럼 옮겨보는 작업을 해보도록 하겠습니다. margin을 왼쪽 오른쪽을 어떻게 두냐에 따라 상호간의 작용으로 자유롭게 옮겨다닐 수 있습니다. text-ailgn을 주지 않았는데도 같은 느낌으로 움직인게 보이시나요. 언어는 항상 논리성을 띄기 마련입니다. 차근차근 어떤부분에서 그렇게 되었는지 확인해보세요 ! 오늘도 고생하셨습니다. 굿밤 !!
nth속성에 대하여(nth가..뭐지....) 오늘은 nth속성에 대해 알아보겠습니다. 같은 태그들을 여러개 쓸 때 2,3번째 태그에만 속성을 주고싶으실때 있으셨나요 ? 오늘은 지난번 독일 국기를 새로운 버젼으로 만들어보겠습니다. !! 종류는 div태그 하나뿐이고 색깔은 3개가 필요한 상황입니다. 어떻게 하면 좋을까요 ? 첫번쨰 두번쨰 세 번째 div들에게 색깔을 적용하고 싶은데... -> 이럴때 nth-child속성을 이용하면 되겠습니다. 보시는 것 처럼 div전체에는 width와 height를 걸어 두께감을 설정해주고~ nth-child(2) - 나는 두번쨰야 !! 라는 뜻 nth-child(3)- 나는 세번쨰야 !! 라는 뜻 첫번째는 두 번쨰 세 번째를 지정해주었기때문에 nth-child를 지정하지 않은 쪽이 첫 번쨰가 되는 겁니다 ! 오늘도 ..
Html + Css를 공부하면서... 독자 여러분 안녕하세요. 글을 여러개 올리면서 혹여나 드는 생각에 글을 남깁니다. 제가 글을 쓰는 이유는 제가 공부하면서 어려웠던 과정들을 이런식 저런식 으로 혼자 생각하며 제가 이해한 뼈대를 토대로스토리로 풀어 나가면서 글을 쓰고 있습니다. 지금 까지 올라온 글이 무엇인지 어려워도 괜찮습니다. 숲을 본다고 나무로만드는 종이가 떠오르지 않을 수도, 하늘을 본다고 무작정 비행기가 떠오르지 않는 것이 당연합니다. 개념은 늘 크고 광대한 범위를 가지고 있기 때문에 저희는 열매,나무의 질감, 냄새,구름 ,지나가는 새들 등을 알아가고 있는 것이라고 말씀드리고 싶습니다. 하나씩 하나씩 차근차근 알아가다 보면 개인의 머릿속이 곧 숲이고 하늘이 될 것 입니다. 독자 여러분들께 드리는 말씀이자 제 자신에게도 늘 하고 싶..
margin(장사가..마진이 안 남네...) 오늘은 margin 속성에 대해 알아보겠습니다. margin이란 쉽게 말하자면 '여유' 라고 생각 하시면 편할 것 같습니다. 시장을 돌아다니다 보면 "사과로는 마진이 잘 안남네..." 이렇게 고민하시는 분이 있습니다. 시장에서 말하는 마진이란 돈의 "여유" 겠죠 ? 코딩 세계에서의 margin도 같은 역할을 합니다. 보면 페이지가 시작되는 부분에 변동 없이 달라 붙어있습니다. -> 디폴트 값이 0이기 떄문이죠 margin속성을 봤을때 상 하 좌 우 모두 띄어진걸 볼 수 있습니다. margin-top , margin-bottom , margin-left, margin-right 속성도 추가로 응용 가능하니 한번 씩 직접해보신다면 margin 속성을 이해 하시는데 큰 도움이 되겠습니다. 오늘도 고생하셨습니다..
padding (겨울에 입는 패딩아닙니다 ㅎ) padding기능에 대해 알아보겠습니다. margin기능에 대해 알아봤는데요 짝궁 격인 padding기능에 알아보겠습니다. padding은 텍스트를 기준으로 상하좌우 기준으로 여백을 늘려주는 것입니다. margin은 박스를 기준으로 바깥과 상하좌우 여백을 늘리는 것입니다. 이렇게만 말하면 사실 어떤 느낌이신지 감이 잘 안 오시죠..... 이 처럼 padding은 텍스트를 기준으로 잡기 때문에 색깔이 커진 반면, margin은 박스 바깥으로 기준을 잡기떄문에 배경과 옆에 있는 "저는 패딩입니다" 상자 위 부분 까지 정해준 만큼 차이를 두었습니다. !! 오늘도 하나씩 늘려가는 지식들 오늘도 고생하셨습니다 !! 굿밤 ~!
Html로 국기를 만들 수 있다고 ?? 오늘은 지금까지 배웠던 내용들을 종합해 보도록 하겠습니다. !! display와, inline, block, inline-block의 속성들도 모두 기억 하고 계신가요 ? -가장 가볍게 독일 국기를 만들어 보겠습니다. 왜 색깔들을 입혔을때 옆으로 색칠 되지 않고 밑에 밑에 생성 되었는지는 왜 인지 아실거라 믿겠습니다 !!! (힌트는 사진 밑에 있습니다.) 답을 확인해봐야겠죠 ? a태그를 이용하여 "저는 독일입니다." 글을 써주고 href에 링크를 걸어주고, target="_blank" 로 새로운창에서 열러라 ! 라고 주문을 걸어놨습니다. 다양한 국기를 만들어서 코드를 댓글에 공유해주세요 !\ 오늘도 고생하셨습니다. 굿밤 !
텍스트를 옮겨보자 !!!!!! 글자들이 왼쪽으로 정렬되어 원하는 위치로 옮기고 싶으셨던적 많으시죠 ?? 오늘은 텍스트를 옮겨주는 text-align 속성에 대해 알아보겠습니다. text-align 대표적이고 쉽게 이용 할 수 있는 3가지를 알아보겠습니다. -left : 왼쪽으로 정렬 -right : 오른쪽으로 정렬 -center : 가운대로 정렬 왼쪽 가운데 오른쪽 순서입니다 ! 오늘도 고생하셨습니다.!!!!!!!
포탈을 열어주는 태그가 있다고 ??? 오늘은 내부에서 외부 내부에서 내부로 연결해주는 태그인 a태그에 대해 알아보겠습니다. a태그의 기본형은 여기는 텍스트겸(이동하게 만들어주는 수단) 속성 값 뜻 _blank 링크된 문서를 새로운 탭에서 오픈 _self 기본값을 생략 가능하며 현재 위치에서 오픈 _parent 현재 프레임의 부모의 프레임 에서 오픈 _top 현재 윈도우의 프레임 전체에서 오픈 프레임 이름 작성한 프레임에서 오픈 a태그를 이용을 잘한다면 유동적으로 홈페이지내에서 이동이 가능하므로 숙지를 하시면 좋겠습니다. 오늘도 고생하셨습니다 !!!

티스토리툴바