[운동 기록 웹페이지 만들기] css 스타일시트 작성하기 (2023.03.04)

어제 CSS 핵심 강의를 다 듣고 오늘 내가 만든 웹페이지에 스타일을 입혀보았다. 카카오오븐으로 만든 스토리보드 디자인을 기본으로 했으나, 폰트 크기나 여백 등은 임의로 css로 직접 코딩을 해보면서 적당하게 조절하였다. 

 

🔎 css 코드 작성 결과

 

간단한 웹페이지라서 동일한 디자인의 구조가 많아 작성이 어렵지 않았다. 작성하면서 모르는 부분은 구글링을 통해 해결하였고, 그 내용은 아래와 같다.

 

📖 Div 태그 중앙에 정렬하기

Div 태그에 Width를 설정하고 margin 오른쪽, 왼쪽 값을 auto로 설정

 

▼ html 코드 ▼

 

▼ CSS 코드 ▼

 

📖 한 줄 문장 양쪽 정렬하기

한 줄짜리 문장을 양쪽 정렬하고 싶어 text-align: justify를 적용했지만 적용되지 않았음. 여러 줄일 경우에는 정렬이 되지만 한 줄일 경우 아래 사진과 같이 정렬이 안됨. (오른쪽 여백 남아있음)

 

아래와 같이 양쪽에 여백이 없게 맞추기 위해서 추가 코드 작성이 필요함. 

.클래스명::after {
    content: "";
    display: inline-block;
    width: 100%;
}

 

::after는 css에서 콘텐츠 끝부분에 생성된 콘텐츠를 추가하는 가상요소로 요소의 콘텐츠 시작 부분에 생성된 콘텐츠를 추가하는 ::before도 있음. ::after와 ::before에는 content라는 속성이 꼭 필요함. 여기서 content는 가짜 속성으로 HTML 문서에 정보로 포함하지 않은 요소를 CSS에서 새롭게 생성함.  

 

위의 코드에 대한 해석이 잘 나오지 않는데 개인적으로 예상하기로는 inline-block;으로 입력된 텍스트 바로 옆에서부터 그다음줄을 다 채울 때까지 빈 문자를 넣어 여러 줄(2줄)로 만들어 justify가 가능하도록 한 것 같다. 

 

 

그 결과 아래와 같이 콘텐츠 높이(height)가 2배가 된다.   

 

이를 해결하기 위해서는 글자 크기만큼의 margin을 줄이거나 줄 간격을 50%로 줄이면 된다. 

이 코드를 작성할 당시에는 위의 한 줄 양쪽 정렬의 원리를 몰라서 margin을 줄이는 대신 줄 간격을 줄였다. 50%로 줄였을 때 약간 안맞는것 같아 나의 경우 45%로 적용했다. 

 

 

 

📖 button 태그 테두리 없애기

border: none;

 

📖 button 마우스 커서 올리면 커서 모양 바뀌게 

링크 태그와 다르게 버튼 태그는 마우스를 올려서 포인트 모양이 그대로였다. 그래서 마우스를 올리면 커서 모양이 포인터 모양으로 바뀌게 적용하였다. 

cursor: pointer;

 

📖 원형 버튼 모양 만들기 

원형 버튼

border-radius: 50%;
width와 height는 동일한 값

라운드 버튼

border-radius : height의 절반

 

📖 a 태그 : 글자 중앙에 정렬하기

a 태그는 인라인 요소라 인라인 진행 방향(가로방향)으로만 margin과 padding이 적용됨. 그래서 display: inline-block을 준 후 padding을 넣었지만 아래 사진과 같이 중앙에 배치되지 않음. 

 

 

이 경우, line-height를 height와 동일한 값으로 설정면 중앙에 배치할 수 있음. 

 

 

line-height : 00px;
font-size와 동일하게 넣기

 

 

📖 표 안에 input 넣기 & input 디자인 없애기

표 안에 text나 숫자를 넣을 수 있게하려고 input 태그 사용하였음. 이게 맞는지는 아직 모르겠으나 일단 할 수 있는 방법이 이것이므로 적용해 봄. 

 

▼ html 코드 ▼

 

이렇게 표의 각 칸 안에 input 태그를 넣으면 표 안에 input 기본 디자인으로 칸이 생김. 

 

 

input 태그의 디자인을 없애기 위해 아래와 같이 css 코드 작성하였음. 

background-color는 투명하게 하고, border: none으로 테두리를 없애고, height와 width 100%로 지정하여 칸에 딱 맞게 지정하였음.

 

 

input의 디자인을 없애면 아래와 같이 디자인이 변경됨. 

 

 

📖 input 포커스 되었을 때 디자인 변경

아래 사진과 같이 input 포커스 되었을 때 디자인 변경하기.

 

일반

포커싱 됐을 때

 

:hover와 같이 가상 요소 :focus 사용하여 스타일 적용

이 경우 테두리 디자인은 border가 아닌 outline으로 적용해야 함.