본문 바로가기

분류 전체보기131

CSS_div태그 오늘은 div 태그에 대해서 포스팅할게요! 우선 태그란 단락이나 구역을 나눌때 사용하는 태그입니다! 바로 사용해 보도록 하겠습니다. div태그로 단락을 묶어주면 영역이 정해집니다. style에서는 div의 테두리를 파란색으로 1px굵기의 선으로 묶고 패팅과 마진값을 부여하였습니다. 결과화면은 아래와 같게 나오게됩니다. 이해를 더 돕기 위해서 색깔로 구분을 한번 해보도록 하겠습니다. div태그의 속성은 다음줄로 넘기는 속성이 있습니다. 이렇게 코딩을 하면 어떤 결과가 나올까요? 각 구역의 값을 30%로 3개를 넣으면 한줄에 코딩이 되어야 하지 않을까요...? 결과는 다음과 같습니다. 다음줄로 넘어가게 되죠. 왜냐하면 div는 다음줄로 넘기는 속성이 있기 때문입니다. 그렇다면 한줄에 3개를 넣을려면 어떻게 .. 2017. 3. 12.
CSS_Position 오늘은 포지션에 대해서 포스팅을 하겠습니다! 포지션이란 위치를 말하는거죠^^ㅎㅎ 이번에는 Static 과 Relative 에 대해 알아보겠습니다. 먼저 Static을 알아보도록 하겠습니다. Static은 "고정된"이라는 의미를 가지고 있으며 HTML에서 기본으로 설정이 되어있는 값 입니다. 위에서 보시는바와 같이 static을 설정해 놓으면 저희가 원래 알고있던 결과 값이랑 동일하게 나타나게되죠? 이제 다시 코딩을 해보도록 하겠습니다. 소스가 이해 가시죠....? Default 라는 컨텐츠가있는 div안에 Relative 라는 컨텐츠가있는 div를 넣었습니다! 아래 body태그의 내용은 위와 똑같고 id 값에 변화를 주었습니다!! left:80px; top:100px; 를 추가했더니! Default 컨텐.. 2017. 3. 9.
CSS_Layout2 오늘은 Layout 2번째 BOX에 대해서 알아볼께요! 우선 기본적으로 p태그를 이용해서 한번 코딩 해보도록 할께요! 우선 아무의미가 없는 내용을 코딩해 보았습니다. 저건 lorem 이라고 치면 자동으로 쳐지는 아무 의미없는 문자 입니다. 우선 결과화면을 웹페이지로 보시게 되면 좀 답답한 감이 없지 않아 있게 느껴지실텐데요... 오늘 그 답답함을 해결해 보도록 하겠습니다! 박스는 이렇게 구성이 되어있다고해요! p태그를 쓴것은 내용물(content)에 해당하는 것이구요, 나머지는 이제 설명하도록 하겠습니다. 먼저 패딩(padding)을 설명할게요. 패딩은 border와 content간의 간격을 의미합니다. 소스를 보시면 style태그 안에 p 셀렉트 안에 padding:10px; 라고 쓴거 보이시나요? 저.. 2017. 3. 8.
CSS_Layout_1 오늘은 HTML에서의 Layout에 대해서 포스팅 할께요! 먼저 Layout에는 Inline 과 Block Level 이렇게 두가지가 있습니다. 말보다는 코딩으로 보여드릴께요! 여기 결과 화면에서 보시면 h1태그로 묶인부분은 화면 전체가 네모칸이 쳐져있구요 a태그로 묶인 부분은 a태그인 부분만 네모칸이 쳐져있습니다. 이로써 a 태그는 인라인이고 h1태그는 블럭레벨임을 알 수가 있었습니다. 그럼 바꿀수도 있을까요? style 태그안에서 h1의 display속성을 inline으로 바꾸고 a의 display속성을 block으로 바꾸면 위의 결과화면처럼 바뀌어 나타나는 것을 볼 수가 있습니다! 2017. 3. 8.

티스토리툴바