Web/CSS19 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. CSS_Fontsize 오늘은 Font size에 대해서 포스팅을 해볼려고 해요 제가 HTML 폴더에 HTML글씨체(http://jsfootprint.tistory.com/13) 라고 포스팅 해놨던 것이기도 한데요 좀 자세히 풀어서 써볼까 해요ㅎㅎ 먼저 Font-size에는 Px 와 Rem으로 나눌 수 있어요. 둘의 차이점을 알아 보도록 할께요! 크게 둘의 차이점은 상대적이냐 절대적이냐 라고 볼 수 있는데요. 이는 폰트 사이즈를 조정할 수 있는 사용자의 권리를 존중하기 위함이라고 해요. 사용자가 브라우저의 글꼴 크기를 변경했을때 Px는 바뀌지 않고 (절대적) Rem은 바뀐다고 해요! (상대적) 요즘에는 rem을 많이 쓴다고 해요! 2017. 3. 7. CSS_cascading 오늘은 Cascading 이라는 것에 대해 포스팅 할려구 하는데요~ Cascading이란 적용 우선순위 라고 할 수 있어요. 우선순위가 어떻게 적용되는지 한번 알아볼게요~ 우선 기본 코딩을 해볼께요! 태그에만 색깔을 입혀보았습니다. 이제 id값과 class값, style 속성값을 넣고 우선순위를 비교해 보도록 하겠습니다. 화면을 보시는 바와 같이 id값,class값,style속성값, tag값 이렇게 4가지가 겹쳐있는경우, 우선순위는 Style Attribute > Id selector > Class Selector > Tag Selector 순서로 우선순위가 정해집니다! 2017. 3. 7. 이전 1 2 3 4 5 다음
