-
요즘 웹퍼블리싱을 배우려는 사람이 많이 있는데욥.
많은 학원들이 있지만, 과연 실무에서 바로 써먹을만큼 제대로 가르쳐주는 곳이 있을까?
제 경험상 없습니다.
실제로 저도 고용노동부의 내일배움카드를 발급받아 웹퍼블리싱 교육과정을 들었지만 ,실무에 투입되었을 때 당장 써먹기는 매우 어려웠던 기억이 있습니다.
그리하여 저는 이제부터 실전 압축 퍼블리싱 방법을 속성으로 포스팅해보려고 합니다.
실전에 중점을 두고 정말 실전에서 사용할 포인트 위주로 정리할건데요, 속성인 관계로 기초적인 태그의 설명은 생략하도록 하겠습니다.(귀찮아서 생략하는거 정말로 아님..)
퍼블리싱을 할 때 많은 요소들 중 어느 것이 더 중요한가의 우선순위는 없기에 두서 없이 진행되겠지만, 최대한 많이 활용되는 순서대로 정리를 해보도록하겠습니다.
그럼 첫번째로 인라인 태그와, 블럭 태그의 특성에 대해서 알아보겠다.
1. 인라인 태그
- span, i, em, b, a, strong 등의 태그
- 일반 text 문자와 똑같이 좌에서 우로 정렬된다. (길이가 길어지면 자연스럽게 줄바꿈...)
2. 블럭 태그
- 기본적으로 화면의 가로 크기와 동일한 width를 갖는다. (꽉찬 가로 크기)
- 블록 태그가 담고 있는 내용물이 없거나, style이 지정되지 않았다면, 화면상에 나타나지 않는다.
- 태그들은 각각 위에서 아래로 순차적으로 정렬된다.
- p, div, section, ul, li, dl 등
예제)
<body> <p>웹퍼블리싱의 기초 속성으로 가보즈아~!</p> <p><span>웹퍼블리싱의 기초</span> <i>속성</i>으로 가보즈아~!</p> </body>위와 같이 block 태그 <p>로 감싸진 문장이 두 개 있습니다.
첫째줄은 p태그 안에 문자만 입력했고, 두번째줄은 중간중간을 인라인 태그로 문자를 감싸주었습니다.
결과는 아래와 같겠죠?
결과
p태그는 block 요소로 가로 크기가 화면가 똑같이 꽉차게 갖기 때문에 다음 요소가 우측이나 좌측으로 붙을 공간이 없기 대문에 p태그 바로 아래로 정렬이 되게됩니다.
그러나 inline 태그는 text와 나란히 정렬되기 대문에 위와 같은 결과가 나왔습니다.
조금의 이해를 돕자면
위에서 빨간색으로 선택된 영역이 p 태그의 영역이 되는 것이고 파란색으로 칠한 것이 스크린(모니터)의 크기라고 보시면 됩니다.
인라인 태그인 span과 i 태그는 아무리 태그로 감싸져있더라도 css에 특별한 속성을 지정해주지 않는다면, 태그 자체만으로는 layout에 변화를 주지 않고 일반 텍스트들과 어울려서 정렬되는 것이다.
반대로 block 태그는 아무런 스타일을 주지 않아도 가로 크기가 스크린 가로의 크기와 동일한 것을 볼 수 있습니다.
이게 불낙이다 네 아무튼 이것은 불낙은 아니고 block인 것입니다.
매우 간단하죠?
첫 시간은 이만 줄이구요 바로 다음시간에는 inline-block 태그와 함께 inline, block 태그의 style 차이를 더 깊게 알아보도록 하겠습니다.
투비컨티뉴ㄷ...
728x90반응형'프로그래밍 > css' 카테고리의 다른 글
css3 스케일 알아보기 - transform: scale() (6) 2021.03.18 포커스 파란색 보더 없애기 focus outline 제거 CSS (0) 2020.04.24 css선택자 [class*="name"] class다중선택 (2) 2019.12.20 이 글을 공유하기최근글
최근댓글