처음에 기본적인것을 세팅하는 방법에는 new file로 새로운 파일을 만들고 .html로 확장자를 만들어 놓는다
그리고 !+tab을 누르게 되면 아래와 같이 기본 틀이 생성된다
우리는 한글을 사용하기 때문에 lang="en"을 "kr"로 바꿔주었고, <!-- 주석-->으로 이름을 달아줬다
그리고 처음에 기본적으로 테두리값이 들어가 있기 때문에 <style>로 margin과 padding을 0으로 초기화를 했다
이렇게 기본 틀을 완성해놨다
그리고 첫 시작으로 리스트 뽑기를 해 보았다
코드(과별 리스트)
<div>로 우선 다 묶어주고 <h1>로 제목을 넣어주었음 (크고 굵게 표시하는 코드) 그리고 <ol>에 <li>로 리스트를 넣어서 과들을 표기하였음 <ol>을 넣으면 이스트에 자동으로 번호가 표기됨 그리고 스타일을 이용해 왼쪽에 padding을 20px을 넣었다 근데 티는 잘 안 나는 듯..
결과물
이번엔 공지사항을 비슷하게 만들어보는 것을 했다
이거를 참고하였고
코드 (공지사항)
공지사항처럼 보이고 싶으면 표를 만들어야 하는데 그러기 위해서는 <table>을 통해 표를 만들어야 한다 <th> / <thead>는 제목칸이라는 의미고, 거기에 <tr>을 삽입하게 되면 행(가로줄)을 삽입할 수 있게 됨 <td>를 넣어 table data를 넣을 수 있다(세로줄 느낌인 듯)
그리고 class=""로 이름을 붙일 수 있다 맨 위에 공지사항 글자 부분과 공지 부분만 볼드체에 색이 다르기 때문에 스타일을 넣어야 해서 fix라는 이름을 붙여줬다
스타일 (공지사항)
style을 넣지 않으면 아래와 같이 글자만 뽑히기 때문에 style을 넣어줘야 한다
전체 스타일을 보면 이런 식으로 구성해 보았고 하나하나 따져보려고 한다
우선 .notice부터 알아보려고 한다 한 페이지에 목록, 공지사항, 사진을 넣었기 때문에 공지만 따로 위에 공백을 주고 싶어서 notice라는 class명을 따로 줬었다 이제 이 부분에만 style을 주고 싶으면 class명 앞에 .을 붙이고 .(class명) {} 이렇게 넣어주면 된다 padding은 내부에 공백을 주려고 할 때 쓰는 것이고 padding-top을 넣어 안쪽 상부에 50px의 공백을 주었다
padding을 줬을 때랑 주지 않았을 때 이런 차이가 난다
그리고 table의 width를 80%, border-collapse를 collapse로 줬는데 여기서 table은 표를 의미하는 거고 넓이를 80%로 줬다는 의미인데, %로 넣게 되면 100px이 있다고 하면 80px을 차지한다는 뜻이다 그리고 border-collapse는 table의 테두리를 어떻게 줄 것인지 결정하는 것인데, 여기서 collapse를 넣게 되면 합쳐준다는 뜻이다 (반대로 한 줄을 나누고 싶을 때는 separate를 넣으면 된다)
그리고 td값을 설정했는데, 이거는 표 내부의 스타일을 어떻게 할 것인지 결정하는 것이라고 한다 아까 사용했던 padding을 똑같이 넣어 내부값을 설정했는데, padding-(위치)로 값을 넣어줘도 되지만, 한 번에 상하좌우의 공간을 설정하고 싶을때는 padding : 상 우 하 좌 (시계방향)px으로 한번에 값을 줄 수도 있다
지금까지는 전체 표의 크기와 공간을 설정했으니 이번엔 내부에 세부적인 설정을 넣으려고 하는데 thead는 표 제목 부분의 스타일을 tbody는 아래 하부 항목을 설정하는 것이다
우선 공지사항을 보게 되면 제목 부분은 가운데정렬이고, 아랫부분에 굵은 선으로 구분이 되어있으며 하부 내용들은 연한 선으로 구분이 되어있다
그래서 우선 thead에 text-align을 center로 줘서 가운데 정렬로 바꿨으며,
thead/tbody>tr>td는 가로줄> 칸칸마다라는 뜻이어서 아까 말한 것처럼 thead top(상부)에는 1px solid black을 입력해 1px짜리 검정 실선을 넣고, bottom(하부)에는 px값만 조금 굵게 2px을 줬다
여기서 선의 종류는 solid 외에도 dotted(점선), dashed(파선,-모양이 이어짐), double(이중실선), none(없음)이 있다
그리고 하부 내용도 연한 실선으로 나눠주고 싶어서 thead값과 동일하지만 색만 연하게 넣어줬다
그리고 공지사항에서 제목 부분을 제외하면 가운데 정렬이 들어가 있는데, 2열을 제외하고 값을 넣고 싶을 때는 nth-child라는 것을 넣으면 된다고 한다
nth-child() 형식으로 넣게 되는데 이 괄호안에 값을 집어넣으면 된다 괄호 안에 숫자(n)를 집어넣게 되면 n번째 자식만 선택해서 값을 줄 수 있다 또, 괄호 안에 odd/even이 들어가게 되면 홀수/짝수만 선택, 3n이면 3의 배수, n+3이면 3번째 이후부터 선택할 수 있음
우리는 제목열을 제외한 1,3,4번째 열만 선택을 하고 싶기 때문에 nth-child 1,3,4를 이용해 값을 넣었다 width값을 준 것과 주지 않은 것을 비교해 보면 주지 않게 되면 너무 다닥다닥 붙은 느낌이라 width 값은 1%를 주었다 width를 주지 않았을때width값 1% 그리고 white-space는 글자가 칸을 넘어갈 경우 어떻게 처리할 것인지 설정하는 건데 이렇게 4가지 항목이 있다
글자 크기에 맞춰서 칸 넓이를 맞추고 싶었기 때문에 nowrap을 주었고, nowrap가 들어가지 않은 제목열은 길게 늘어나면
이렇게 다음 줄로 넘어가지만 nowrap을 준 날짜열에 긴 문자를 주게 되면
이렇게 절대 다음 줄로 넘어가지 않고 칸 넓이가 늘어나게 된다 긴 문자가 들어가는 제목열 같은 곳에는 자동줄 바꿈이 있는 css를 주고, 글자가 정해져 있거나, 길게 들어가지 않는 열에 nowrap 같은 속성을 넣어주면 좋을 것 같다
제목을 제외한 모든 열에 가운데정렬을 넣어주기 위해 text-align을 center로 넣었다
마지막으로 아까 공지 부분만 bold에 다른 컬러를 넣고 싶어 fix라는 class명을 넣었던걸 효과 주기 위해서 td(칸 내부).fix(class명)으로 color은 붉은색, bold는 font-weight를 bold를 넣어서 마무리했다
결과물(공지사항)
그러면 이렇게 글자만 다닥다닥 있던 공지사항이 이제 좀 웹페이지 같은 느낌이 나게 되었다
코드(이미지)
마지막으로 간단하게 이미지를 넣어보는 연습을 해보았는데 우선 이미지를 .jpg로 저장하였다
그리고 드래그드롭으로 EXPLORER에 불러와 img 폴더를 생성해서 거기에 보관해 놨다
이미지 쪽 전체 스타일을 주기 위해 아까 공지사항처럼 class값을 box로 넣어줬다 그리고 <h1>으로 제목을 삽입했고 이미지는 간단하게 img src=""로 삽입을 하면 되는데, 폴더가 없이 이미지만 있으면 그 이미지 파일명을 넣으면 되고 폴더 안에 집어넣었다면, img/(이미지 폴더 안) img.jpg(파일명)을 넣어주면 된다
스타일(이미지)
우선, 스타일 없이 이미지를 넣게 되면 이미지 자체가 커서 아래같이 엄청난 사이즈로 들어가게 된다 그렇기 때문에 우선은 이미지 구간에 스타일을 주려고 하는데 아까와 같이 위에 padding값을 50을 주어 공지사항과 공간을 주었고 width는 80%, height는 400px을 주었는데.. 이미지에는 아무런 값을 주지 않아서 padding을 넣은 부분 외에는 차이를 잘 못 느꼈다
그리고 아직도 이미지 사이즈는 크기 때문에 이미지에만 .box>img로 다시 값을 넣기로 했다 여기서 width와 height를 넣었는데, 높이나 넓이 중 한 개의 값만 주게 되면 가로세로 비율은 유지하되 값을 준 곳만 사이즈가 달라지고 두 개 다 주게 되면 비율이 맞지 않는 경우에 찌그러질 수 있다고 한다
그리고 display는 이미지 배치 스타일을 정하는 것인데, inline/block 두 가지가 있다 inline는 글자처럼 취급을 해서 이미지 아래 미세한 빈틈이 생길 수도 있다고 한다 내가 설정한 block으로 넣게 되면 한 개의 큰 덩어리로 취급을 하게 되어 한 줄을 다 차지하게 된다 여기에 margin:0 auto;를 넣으면 가운데 정렬이 가능하다고 한다
마지막으로 object-fit이 있는데 배치 스타일을 결정할 수 있는 속성이다 아까 위에 width와 height값을 둘 다 줬었는데, 이 경우에 찌그러질 수 있다고 했었다 이때 찌그러짐 문제를 해결할 수 있는 속성이라고 한다 fill(기본값)/cover/contain 이렇게 세가지가 있는데, fill은 액자에 맞춰 강제로 이미지를 늘려 찌그러짐이 발생한다 내가 사용한 cover은 가장 많이 쓰는 속성이며, 액자를 빈틈없이 채우되, 비율을 유지하며 넘치는 부분은 잘라낸다 그래서 인터넷 창 크기에 따라 이미지가 잘리면서 사이즈가 변경된다 contain은 이미지를 잘라내지 않고 전체가 다 보이도록 채우며, 비율도 유지되지만 빈 공간이 생길 수 있다 cover과 다르게 인터넷 창에 따라 비율을 유지하면서 사이즈가 달라진다
