레이아웃 코딩 시 주의사항

좌우로 정렬되는 요소는 1:1 대응이 되도록

왼쪽에 배치될 요소 <h2>아름다운 강줄기 따라 가는 풍경 여행 <a>자세히보기
오른쪽에 배치될 요소 <p>강원도 속초 바다향기로는 ... <img>이미지
html은 <div class="tit"> <h2> 아름다운 강줄기 따라 </h2> <a> 자세히보기 </a> </div> <div class="cts"> <p> 강원도 속초 바다향기로는... </p> <img src="" alt="이미지" /> </div> css는 .tit{float: left;} .cts{float :right;} /* cts는 float: left;혹은 float: right; 로 정렬해도 됨. */
왼쪽에 배치될 요소 <h2>같이 걸을까 바스락(樂)길
오른쪽에 배치될 요소 <p>겨울로 가는 길목에서 ... <a>자세히보기
html은 <h2>같이 걸을까 바스락(樂)길</h2> <div class="inner"> <p> 겨울로 가는 길목에서... </p> <a>자세히보기 </div> css는 /* 왼쪽에는 h2태그만 존재하기 때문에 div로 묶지 않아도 됨 */ .h2{float: left;} .inner{float: right;}

두개의 요소가 좌우로 배치될때 주의사항

왼쪽에 배치될 요소 <h2>아름다운 강줄기 따라 가는 풍경 여행 <a>자세히보기
여백
오른쪽에 배치될 요소 <p>강원도 속초 바다향기로는 속초해수욕장(남문)부터 외옹치해변으로 이어져 외옹치활어회센터까지 이어지는 걷기 좋은 길이다. 바다향기로는 크게 데크길과 외옹치해변길 그리고 군 경계 철책 일부가 있는 길로 푸른 바다를 보며 파도 소리를 들으며 걷는 구간이다. 코스 난이도는 낮고 편도로는 3~40분 왕복 1시간30분 정도면 충분히 걸을 수 있다. 자연과 함께 걸으며 분단의 현실과 우리나라 역사의식을 고취시키는 길이다. <img>이미지
html은 <div class="fl"> <h2> 아름다운 강줄기 따라 </h2> <a> 자세히보기 </a> </div> <div class="fr"> <p> 강원도 속초 바다향기로는... </p> <img src="" alt="이미지" /> </div> css는 (float: left;로만 정렬하는경우) 
.fl{
    float: left;
    margin-right: 50px;
}/* 왼쪽 요소와 오른쪽 요소 사이의 여백 */
.fr{
    float: left;
    width: 500px;
}/* 문장이 길어서 넓이를 고정 */
css는 (float: left/right;로 정렬하는경우) 
.fl{float: left;} /* 여백을 주지 않아도 됨 */
.fr{
    float: right;
    width: 500px;
}/* 문장이 길어서 넓이를 고정 */

float값이 들어간 요소는 반드시 이 요소들을 감싸는 영역이 존재해야함.

상단요소
왼쪽요소 <h2>같이 걸을까 바스락길
오른쪽요소 <p>겨울로 가는 길목에서 남해는 색다른 매력을 자랑하다. 이른바 다도해라 불리며 많은 섬과 함꼐 거친 해안 지형의 아름다움과 <a>자세히보기
하단요소 <ul>
  • <li>남해 바래길
  • <li>앵강다숲길
  • <li>가천 다랭이 마을
html은 <div class="tit"> <h2>같이 걸을까 바스락(樂)길</h2> <div class="inner"> <p> 겨울로 가는 길목에서... </p> <a>자세히보기 </div> </div> <ul> <li>남해 바래길</li> <li>앵강다숲길</li> <li>가천 다랭이 마을</li> </ul> css는 .tit{display: block;} /* display: block;를 줘서 h2와 inner의 높이를 인지하도록 함 */ .tit h2{float: left;} .tit .inner{float: right;} ul{display: block;} /* display: block;를 줘서 h2와 inner의 높이를 인지하도록 함 */ ul li{float: left;}