과제 이미지 박스 만들기

만들어보자

아래 사진은 일부분만 진행해본거

 
처음에 틀 잡는게 중요하듯이
1.먼저 3박스 모두
2.한 박스
3.이미지 / 오른쪽 맨상단  제목과 날짜/ 긴 글 /자세히 보기 
 
시작해보자
div로 전체묶음 (가로로 긴 박스 3개를 감싸줄)
그 다음에는 가로로 긴 박스 한개 div를 또 생성해준후 (이건 박스 한개만 포함)후 이 div에는 flex라는 속성을 추가해주는데
이유가 세로로 떨어지지말고 가로로 나열되기 위함
 
1.그 다음 아래로 이미지를 넣어주고 넓이 200px ,높이 200px, 배경색 회색으로 지정
2.오른쪽 맨상단 제목과 날짜를 기입하기전 div로 다시 묶어준후 여기에도 flex를 추가해서 가로나열을 해준다.
(위 사진안에 오른쪽 부분을 보면 flex창이 뜨는데 이걸 활용해준다.)
 
3. 또 div를 추가해줘서 이번에는 p태그에 긴글을 작성해주자
 
4. 또 div를 추가해줘서 이번에는 p태그에 자세히보기 >를 입력해주자
 
이렇게하면 대략적인 한박스는 끝났다.
 
 

css에 점은 class를 의미하고 점이 안붙으면 태그들을 의미한다.
css에 p태그 속성을 부여해줘서 (오렌지 색깔)을 한 결과이다.
 
첫번째 대략적으로 만들어진 박스를 복붙한후
image상자를 변형시켜 봤는데 div에 class를 부여한후 지칭은 인이라고 한후
css에 가서 인에다가 속성을 부여해줬다.
text-align과 line-height을 줬더니 정중앙에 글자가 오게되었고
 
border: 1px solid;로 테두리 생성후 필요 없는 위 양옆은 지울려고
border-top,border-left,border-right을 기입해준후 none으로 입력했다.