내용을 단을 2개로 나눠서 작성할때 table 안에서 <td colspan="2"> 를 이용할것.
그럼 아래 그림 처럼 한 row 에 두 column을 사용하여 만들어짐.
CSS를 공부할때는 pixel grid 이미지를 전체 배경으로 설정해서 보면 css 배치가 어떻게 작동되는지 보기에 훨씬 효과적이다.
난 아직도 position: relative; position: absolute가 조금 헷갈린다....
결국, position: relative는 원래 element가 static이었으면 있었을 자리에서 상대적으로 움직이는 것이고,
position: absolute는 그런거 없이 절대위치를 지정해서 전체 화면 최좌측상단을 기준으로 해서 위치를 결정하는 것이다.
예제)
포스트 참고:
CSS position absolute relative 절대위치 상대위치 개념정리
티스토리 스킨을 뜯어보면 가장 많이 볼 수 있는 태그 요소 중 하나가 바로 position 위치에 대한 설정 입니다. 대체로 두 가지 요소를 많이 씁니다. relative 와 absolute 입니다. 이 두개의 차이를 간단
rgy0409.tistory.com
----
CSS position 는 기본적으로 default 값이 = static이다. (즉, element가 순차적으로 각 자리를 차지하게 된다)
CSS 에는 shorthand property (shorthand: 정의: 속기) 라고 단축 코드를 만들때 사용이 된다. 즉 여러 속성을 한 element 이름안에 순서대로 적용할 수 있다는 것이다. 그 한 예가 아래와 같다.
아래 사진에서 첫번째 line은 font-size: 100% 와 font-family: Courier New; 를 한꺼번에 적용한 것 과 같다.
[css 기초] float 속성에 대하여
[css 기초] float 속성에 대하여 float를 그대로 번역하자면 '띄우다'라는 뜻입니다. float는 css에서 정렬하기 위해 사용되는 속성입니다. 예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나
aboooks.tistory.com
이건 모든 내용을 float로 만든것. responsive web을 만들때 유용하다.
www.w3schools.com/css/tryit.asp?filename=tryresponsive_col-s
Tryit Editor v3.6
* { box-sizing: border-box; } .row::after { content: ""; clear: both; display: table; } [class*="col-"] { float: left; padding: 15px; } html { font-family: "Lucida Sans", sans-serif; } .header { background-color: #9933cc; color: #ffffff; padding: 15px; } .
www.w3schools.com