최근 홈페이지 작업을 하면서 css 때문에 진행이 안되고 있다.
과거에는 테이블로 레이아웃을 잡았는데, 요즘 그런 식으로 화면을 만들면 시대에 뒤떨어진다. 무엇이든 시대에 걸맞게 작업하는 게 바람직 하다.
레이 아웃에서 중요하다고 생각 되는 몇 가지 요점을 이 곳에 정리하여 참조 하자.
display 속성에서 inline 과 inline-block 의 차이점 예제
위의 예제에서 보면 div 테그도 inline나 inline-block 속성을 적용하면 한 줄에 표시가 된다. 그러나 inline 속성은 스타일에서 정의한 폭, 넓이 등의 속성이 무시 되고 있다. 오직 박스 안의 텍스트에 맞게 알아서 한줄에 표시 된다. 또 margin 에서 정한 여백이 좌우에만 적용되고 있다.
그러나 inline-block 는 박스에서 정한 모든 설정이 적용되면서 한 줄에 표시 되고 있다. 아울러 예제에서 box1에는 opacity 값을 설정하여 투명도를 조절했다.
박스에 대하여
홈페이지의 모든 글자는 박스 안에 있다. 따라서 박스에 대하여 몇 가지를 짚어 보자.
박스는 말그대로 사각형 모양을 하고 있으며 그 안에 이미지, 텍스트 등의 내용이 들어 있다. 박스는 선으로 구분을 하는데 이름이 border이다. 그 border를 기준으로 안 쪽의 여백에 해당하는 것은 padding이고 바깥의 여백은 margin이다. 그 박스의 높이는 height, 폭은 width 이다.
박스의 크기를 계산할 때 모든 영역의 수치를 더한 값이 실제의 크기이다.
가령 마진과 패딩이 10픽셀이고 border를 5로 그리고 width를 100픽셀로 정했다면 가로의 정확한 크기는 10+10+10+10+5+5+100 = 150픽셀이 된다.
flex
플렉스가 등장 하고나서 여러 변화가 있었다. 앞으로 레이아웃을 잡기 위해서는 모두 flex를 사용해야 될 지도 모를 일이다. 특이 이전까지 수직으로 가운데 정렬을 하기 위해서는 간단 명료한 방법이 없었다. 모두 꼼수를 통해서 수직으로 중앙 정렬을 해왔을 뿐이다. 그러나 flex에서는 꼼수 없이 한 줄이면 수직으로 중앙에 정렬한다.
align-items:center;
수평으로 가운데 정렬시키고자 한다면
justify-content:center
위의 두줄이면 내가 원하는 이미지나 글자 등이 엘리먼트에서 중앙에 위치하게 된다.
물론, display:flex 를 같이 써야 겠다.
예제는 http://exam.inmu.net/1611/009.eumo 에서 확인하자.
+연산자
css에서 + 연산자가 있다. 인접연산자라고 부르는데 같은 태그가 연속으로 있을 때 어떤 효과를 적용하고자 할 때 사용하면 유용하다.
예를 들어 a태그가 연속으로 있는 메뉴를 구성하는데 좌측에 파란색 줄을 넣고 싶다면 아래의 코드가 유용하다.
a + a{
border-left:1px solid blue;
}
이에 대한 예제를 확인해 보자
http://exam.inmu.net/1612/005.php
조금 더 확장 되어 이쁘게 꾸민 메뉴가 있다.
http://exam.inmu.net/1612/004.php
예제에서 보듯이 메뉴가 5개 있는데 스타일이 적용된 메뉴는 2번부터이다. 따라서 위와 같은 코드에서는 1번 메뉴에 스타일이 적용되지 않는 다는 점을 주의하자
