<!-- css, rel은 연결하려는 파일의 종류를 컴퓨터에게 알려주는 역할,href에 상대경로를 써준다. 현재 폴더에서 css폴더 안에 있는 layout.css를 연결한다. -->
<linkrel="stylesheet"href="./css/layout.css"/>
</head>
<body>
<!-- 먼저 컨텐츠를 모두 감싸는 커다란 박스가 필요하다. 그 박스를 중앙에 보내면 된다. 웹사이트에서 섹션 영역을 작업할 때는 컨텐츠 영역에 모두 넣어놓는게 원칙이다. 입찰/채용공고 글씨는 h2를 사용한다. h1은 로고자리이다. 컨텐츠 아래 카드 3개를 감싸는 박스가 필요하다. 코드를 만들 때는 반드시 큰 박스부터 작은 박스 순서대로. 구조를 나누는 연습을 잘해야한다. -->
<divclass="container">
<h2>입찰/채용공고</h2>
<!-- 슬래쉬는 엔터틱 코드 찾아서 써주는게 좋다. -->
<ulclass="buttons">
<!-- 버튼은 버튼이라는 태그가 따로 있지만(버튼의 모양과 기능에 따라 쓸 수 있는게 다름) 나중에 배우기로! 탭메뉴를 배울 때 ul,li쓰기도 한다. 클릭하면 이동하는 경우는 a 태그를 쓴다. -->
<liclass="btn1">전체공고</li>
<liclass="btn2">입찰공고</li>
<liclass="btn3">채용공고</li>
</ul>
<divclass="card_wrap">
<!-- 디자인이 모두 똑같다면 class이름 동일하게 두기 -->
<!-- 작은 제목은 h4로 처리한다. h3은 중간 글자크기, 제목에 따른 내용은 p태그, 날짜는 span태그(inline속성이라 마진 주기 어려움.)날짜는 p태그 써도 된다. 카드 안의 내용 안에 패딩이 들어있고, 보더와 패딩을 모두 고려해야할 경우 box-sizing을 쓴다. -->
<divclass="card margin_none">
<h4>입찰공고</h4>
<h3>대전투자금융 채용 대행 용역 입찰공고(본공고)</h3>
<p>
지역의 투자생태계 혁신을 주도하는 벤처금융 전문기관
[대전투자금융]에서 더 나은 벤처투자생태계 조성을...
</p>
<span>2024-12-06</span>
</div>
<divclass="card">
<h4>입찰공고</h4>
<h3>대전투자금융 채용 대행 용역 입찰공고(본공고)</h3>
<p>
지역의 투자생태계 혁신을 주도하는 벤처금융 전문기관
[대전투자금융]에서 더 나은 벤처투자생태계 조성을...
</p>
<span>2024-12-06</span>
</div>
<divclass="card">
<h4>입찰공고</h4>
<h3>대전투자금융 채용 대행 용역 입찰공고(본공고)</h3>
<p>
지역의 투자생태계 혁신을 주도하는 벤처금융 전문기관
[대전투자금융]에서 더 나은 벤처투자생태계 조성을...
</p>
<span>2024-12-06</span>
</div>
</div>
</div>
</body>
</html>
@charset"utf-8";
/* 언어인코딩 형식, 기본구조 없이 바로 작성하면 된다. 코딩이 짧아서 초기화까지 같은 파일에 써보자. css파일을 html에 연결할 때 head에 써주고, link태그 써줘야한다. */
/* 초기화 코드, 초기화해줘야되는 태그들 ul,li(불릿 지워야하므로), a태그는 컬러랑 밑줄 나오는 거 없애줘야한다. 원래 초기화 안에는 body도 있어야한다. */
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none; /* 불릿 없애기 */
}
a {
text-decoration: none; /* 밑줄 없애기 */
color: #111;
}
/* 레이아웃, 가장 큰 구조부터 불러와라 */
.container {
width: 1600px;
height: auto;
margin: 0 auto; /* 박스 중앙에 배치 */
}
h2 {
text-align: center;
margin-bottom: 50px;
font-size: 28px;
} /* h2는 블록속성! 글자 자체를 가운데로 그냥 보내는게 나중에 제목이 길어졌을 때를 대비해 컨트롤하기 편하다. */
.buttons {
width: 616px;
height: 50px;
margin: 0 auto;
background-color: aliceblue;
margin-bottom: 100px;
/* margin을 이미 줬기 때문에 아래 쪽에 margin bottom이 있어야한다. margin보다 위에 써주게 되면 초기화된다. 가장 아래 스타일이 우선순위가 되므로 */
}
.buttonsli {
/* 공통속성, 한칸 띄고 쓰면 buttons안에 있는 모든 li를 불러오란 뜻 */
width: 200px;
height: 50px;
border-radius: 25px;
text-align: center;
line-height: 50px;
float: left;
}
.btn1 {
background-color: rgb(73, 153, 126);
color: aliceblue;
}
.btn2 {
background-color: #dedede;
color: #333;
margin-left: 8px;
}
.btn3 {
background-color: #e6e3e3;
color: #272727;
margin-left: 8px;
}
/* float된 자식박스들은 부모박스들이 높이가 없다고 판단하여 0이 되므로, 박스들을 정렬하기 전에 ! 부모박스의 너비와 높이를 지정해주는 것이 좋다 */
.card_wrap {
width: 100%; /*부모의 넓이가 1600이므로 100%를 주면 1600이 된다. 1600px로 주면 틀린 건 아니지만 반응형할 때 힘들다. 자식한테 고정 픽셀을 넣어주게 되면 부모 사이즈 픽셀을 바꿔줬을 때 어렵다. 안에 있는 자식박스가 부모박스의 넓이와 동일해야할 때 100%를 써주는게 좋다. 부모 넓이가 변경될 때마다 알아서 변경될 수 있도록*/
height: 304px; /* card에 float속성을 줬으므로 부모 박스의 높이를 물리적으로 넣어주어야한다! auto 안된다. */
}
.card {
/* 520은 글자영역의 너비만이다. */
width: 520px;
height: auto;
padding: 24px;
border: 1px solid #a51414;
border-radius: 20px;
box-sizing: border-box;
color: #555;
float: left;
margin-left: 20px;
}
.cardh4 {
/* 같은 폰트 사이즈여도 폰트가 굵으면 작아보이고, 얇으면 커보인다. */
font-weight: normal;
font-size: 14px;
margin-bottom: 16px;
/* 블록속성이라 아래쪽에 margin 줄 수 있다. */
}
.cardh3 {
font-size: 28px;
margin-bottom: 16px;
color: #111;
}
.cardp {
font-size: 16px;
margin-bottom: 50px;
}
/* 카드 3개를 복제해서 만들었을 때 아래로 배치되는데 카드 1개당 높이를 먼저 개발자도구f12로 확인해본다. 부모의 높이는 304가 된다. */
/* class="card margin_none" 클래스 이름은 여러 개 지정해줄 수 있다. 외국에는 다른 이름으로 불릴 수 있는 개념 */
.margin_none {
margin-left: 0;
}
display (표현속성)★
웹문서에서 사용되는 태그는 inline, block, inline-block속성으로 나눠진다.
