- 고정형 예제 마무리 (main contents, slogan, footer 영역)
- figma 시안 보는 법과 naver 로그인 페이지 숙제 가이드
- HTML5와 CSS에 대해 치렀던 시험 feedback
- 파이썬 등 한 언어에 대한 수업을 마치고는 관련해서 회고하는 포스팅을 해보면 좋다.
- 본인의 질문과 이에 대한 답변을 찾아 정리해서 기록할 것
- 눈앞에 당장 성장이 보이지 않는다고 좌절할 필요가 없다. 전공자와는 당연히 격차가 있는 것이니 내 속도대로 나아가는 것이 중요.
- 관련사이트는 마크업 구조는 매우 간단하다. 섹션 안에 헤딩이 있고 여러 사이트로의 링크 목록에는 ul태그를 사용한다.
- HTML5에서 ul태그의 자식요소는 li만 올 수 있으므로 li 안에 a를 넣어 링크를 연결해준다.
- 관련사이트는 신규이벤트 헤딩과 스타일이 동일하므로 utility naming인 point-color을 클래스명에 넣어준다.
- 마우스가 펼쳐졌을 때의 효과 등 나머지는 css에서 준다.
- 신규이벤트와 마치 한 component인 것처럼 보여야 하므로 윗마진은 주지 않되, padding-top을 주어 헤딩 위 여유 확보
- 신규이벤트 section에는 위에만 줬던 border-radius를 아랫부분에 준다.
- ul에는 normal상태일 때를 default값으로 두고 hover 및 focus일 때 재정의
- ul의
margin,padding-left,list-style-type을 리셋 height를 border값까지 포함하여 25+2pxborder: 1px solid #ccc및border-radius값 주기- CSS에서는 부모요소 선택하여 값을 변경하는 것은 불가능(c.f. JavaScript에서는 DOM traversing을 통해 가능)하지만 동적 가상 클래스(
:hover또는:focus)를 통해 상태에 따른 스타일링 변화를 줄 수 있다.focus는 기본적으로 a 요소나 input과 같은 form 관련 요소에만 해당되는데, 그 외의 요소에 focus 주려면tabindex="0"를 줘서 focus 받을 수 있는 요소로 재정의해준다.- 반면
hover은 모든 요소에 가능하다
- ul의
- normal 상태에서 한 줄만 보여지게 하려면 li나 a의 높이를 조절하면 된다.
- li는 display default가 block이기 때문에 바로 높이를 주면 된다.
- a는 display default가 inline인 요소이므로 block으로 재정의 필요.
- 높이를
height로 주면 위로 text가 붙어 따로 여백지정을 해줘야하므로,line-height로 준다. 또는 ul을 flex container로 만든 후justify-content로 조절하는 방법도. - 앞여백은
text-indent: 2em;으로 2글자 크기만큼 준다. - 텍스트가 넘치지 않게
overflow:hidden;
- 각 사이트의 링크 a태그에 포커스가 갔을 때 아웃라인이 너무 크게 잡히지 않도록
outline-offset: -2px을 주고outline은 border와 같이1px solid darkblue등으로 커스텀해줄 수 있다. 박스쉐도우로도 커스텀이 가능하다고 하는데 더 알아볼것.
@keyframes을 활용하면 중간지점의 디테일한 컨트롤이 가능하며 특정 셀렉터에서 호출하여 적용하고 딜레이를 줄 수 있었다.transition은 상태 변화 전과 후의 중간과정을 따로 컨트롤하지는 못하지만, 변화되는 중간의 과정(네모에서 원이라고하면 팔각형, 빨강에서 파랑이라고 하면 보라색)을 자연스럽게 보여준다.- 포커스가 잡히거나 커서가 올라갔을 때 등 특정 상태가 trigger로 발동하며, 상태선택자나 동적가상클래스가 아니라 상태가 변하기 전의 해당 요소에 직접 지정한다.
- 동적가상클래스에는 trigger가 발동하여 transition이 일어난 후의 속성 값만 준다.
transition-property,transition-duration값을 주어야만 애니메이션이 동잓한다.transition-property에는 위의 동적가상클래스에 적용한 속성 중 애니메이션이 적용될 속성을 적되, 모두 적용하려면all을 적는다.transition-duration로 keyframes 했을 때와 같이 애니메이션 작동시간을 설정transition-delay,transition-timing-function등으로 세부 디테일을 정할 수 있다.
- 이 방법을 이용하여 우리 예제의 관련사이트 ul 부분에
:hover과:focus에 padding과 height를 주고, ul에transition-property: all; transition-duration: 0.4s;로 애니메이션을 준다.
- 논리적 순서 도출
- 제목과 순위들, 그 후에 더보기 버튼의 순서로.
- semantic mark-up
- 전체는 역시 section태그로, 그 안에서 h2이 있으며 순서가 있는 목록이므로 ul이 아닌 ol과 li를 넣고 더보기 버튼은 a태그로 넣어보자.
- li 안에 a태그를 넣어 클릭시 링크로 연결되도록 한다.
- li 내 순위를 나타내는 그림은 img로 가도 되지만 강조의 의미로 em을 쓰고, text node로 상승, 하락, 변동없음을 넣어준 후 IR처리 하자
- li 안의 a태그 앞에 오는
::before가상요소선택자로 순위를 나타내주기.
- class naming
- section에는
gradient-box로, h2는 윗 섹션들의 헤딩과 같이point-color로 utility naming 추가 - 더보기 태그에는
icon-plus로 fontello의 아이콘을 데려오고, title attribute로 어떤 것을 더보는 것인지 툴팁에 드러나게 해준다.
gradient-box와point-color은 위에서 이미 정의된 값으로 스타일링이 적용된다.- section favorite에 margin-top을 주어 위 섹션과의 간격을 확보한다.
- 더보기 버튼을
position: absolute;해주고 offset parent인 section도position:relative;처리 - favorite-heading은 위의 event-heading과 related-heading과 동일한 스타일이므로 위에 추가해준다.
.favorite-list li::before로 li의 자식요소로 가상요소선택자를 만들어야 하는데 각각 만들기엔 너무 비효율적이므로 CSS의 내장함수를 사용한다.::before이 오기 전.favorite-list li에counter-increment: number을 선언해주고, 가상요소선택자에content: counter()을 넣어주면 각 li의 순서에 따라 자동으로 넘버링 된 숫자가 렌더링이 된다.- 숫자 대신 로마자 등도 올 수 있다. 동일한 결과를 위해
favorite-list에counter-reset을 해주는 방법도 있는데 구글링 해볼 것.
- 가상요소선택자에 color, border-radius, background-color 등 커스텀해주되, inline 요소라서 content 크기만큼만 너비가 넓어지니까 아예
display:inline-block;후 padding과 margin을 주...려다가 나중에 어차피 li에 의해 flex-item 되니까 그 떄 display속성은 삭제해도 괜찮다. em태그가 포함할 이미지의 크기만큼 높이와 너비를 주고(width:9px; height:11px;), text node를 숨김처리하기 위해overflow: hidden; text-indent: 9px;- 밑으로 밀려나 텍스트의 일부가 보일 수도 있으니
white-space: wrap으로 안전하게 처리
- 밑으로 밀려나 텍스트의 일부가 보일 수도 있으니
- CSS Sprite 기법을 활용하여 배경이미지를 주고 상승하는 em들에게는 X축 position을 0으로, Y축은 상승이미지는 가장 위에 있으니 0 그대로 두고, 변동없음에는 50%, 하락에는 100%를 주어 해당 그림이 나타나게끔 한다.
- li 안에서의 배치를 위해 li를 flex container로 만들어주고 align-items를 center로 하여 동일한 선상에 배치되도록하며, a에
flex-grow:1을 줘서 링크영역이 남은 너비를 꽉 차지하도록 한다.
- 커피잔은 배경이미지 처리하기에는 web cafe의 상징적인 의미가 있으니 슬로건 영역의 h2 제목으로 하고 텍스트 노드를 안보이게 하는 IR기법을 사용하되, position trick으로 접근해보자.
- 이번에는 article 로 가보도록 하자. h2로 커피잔 그림을 주고 슬로건이라는 텍스트노드를 숨김처리
- 인용구는 p태그 안의 q태그를 사용하고 span으로 인용구 아래 내용을 마크업
<q>나<blockquote>는 인용을 위한 태그로,cite=""라는 attribute를 갖는데, 책에서 인용하면 ISBN을, 웹에서 인용하면 웹주소를 적는다.- 자동으로 따옴표가 붙는데, 이를 없애거나 커스텀하려면
::before과::after가상요소 선택자를 통해 따옴표가 들어간 것이므로 해당 부분에 작업하면 된다.
- slogan-heading에 width/height를 커피잔 이미지의 크기와 동일하게 설정하고,
text-align: center; line-height: 커피잔이미지높이;로 설정- 또는
display:flex;를 쓰고align-items: center; justify-content: center;의 모던기법으로 텍스트를 중간에 위치시키는 방법도 있다.
- 또는
- IR position trick: slogan 부분을
position: relative로,slogan::after을 만들어content: ""; position: absolute; top: 0; left: 0; width: 100%, height: 100%;로 부모요소를 덮은 후 배경이미지를 씌운다. - slogan 영역의 우측에 인용구가 시작하도록 하기 위해 커피잔 그림만큼의
padding-left를 준다. 위아래 패딩까지padding: 15px 70px 15px 150px;주기 - 따옴표의 위치를 바꾸기 위해
position: relative;를 선언한 후 top좌표를 찍으면 자기자신의 위치에서 이동하면서도 자식, 형제 요소의 normal flow에 영향을 주지 않는다. absolute처럼 떠오르지 않으면서도 이동이 가능하다.
호환이 안 되어 우리나라에서는 쓰일 일이 많지 않긴 하지만 그래도 footer만큼은 grid로 작업해보자.
독립적인 영역이 아니라 사이트를 마무리하며 저작권, 주소 정보등을 담는 영역일 뿐이니까 따로 heading을 줄 필요까진 없다. Grid 작업을 위해 각각의 semantic 태그를 div로 감싸줄 것!
- 논리 순서: 로고, 가이드링크, 주소정보, 저작권정보, HTML/CSS 뱃지 순서로
- semantic mark-up
- 로고는 a로 메인화면 링크를 걸자
- 가이드 링크 여러개를 ul 속 li들로 만들자 (링크니까 당연히 a)
- 주소와 연락처 등의 정보는 address라는 태그를 사용하는데, main 영역 등 다른 곳에서 주소정보를 입력할 때 쓰는 것이 아니라 이 웹사이트에 대한 주소정보이므로 footer에서만 사용한다.
- copyright 정보는 small 태그로. (실제 폰트크기도 작지만 저작권, 덧붙이는 글, 법률 표기 등의 목적을 위한 기능적 태그)
- HTML/CSS 뱃지이미지는 그리드를 위해 그루핑만 한다.
- 클래스 네이밍은 알아서 하는 걸로 하고 TIL에선 생략
- yamoo9님의 Grid Layout Guidebook 참고
- 디자인 시안대로가 아닌, 논리적 마크업 후에 자유로운 배치가 가능한 엄청난 장점을 가진 모던 기법이지만, IE호환이 안 된다는 엄청난 단점이 있다.
- 부모요소에
display: grid;선언하면 flex처럼 자식요소들은 grid items가 된다. - media query로 각 그리드 배치를 따로 작성하면 기기마다 다른 레이아웃을 손쉽게 적용시킬 수 있다.
- grid-container
grid-template-columns로 column의 개수와 너비를 쉼표 없이 알려주면 알아서 착착 배열된다.- row는 item의 높이에 따라 자동으로 늘어나지만
grid-template-rows로 값을 줄 수도 있다(우리 예제에서는 50px씩 주도록 하자). - 위 두 개의 행과 열 선언으로 각각 높이와 너비를 가진 9개의 영역의 그리드가 생성된다.
- grid-item이 차지할 column과 row의 시작선과 끝선을
grid-column(또는 row)-start(또는 end)로 지정하면 해당 영역을 차지하며 배치된다.- start만 선언하고 end를 선언하지 않으면 자동으로 1개영역만 차지한다.
- shorthand 표기:
grid-area: (column start)/(row start)/(column end)/(row end) - 자식요소에 따로 위치를 지정하지 않으면 마크업 순서대로 배치된다.
- naming으로도 grid 배치가 가능하다.
- 각 grid-item에
grid-area: {영역이름};을 붙여준다. - grid-container에 columns와 rows의 수와 너비를 선언한 후
grid-template-areas에 겹따옴표를 행 수만큼 만들되 콤마 없이 연결하며, 겹따옴표 안에는 영역이름을 차지하는 부분에 콤마 없이 넣는다.
- 각 grid-item에
grid-template-areas: "logo guide badge"
"logo address badge"
"logo copyright badge";
- 우리는 너비가 각각 140px, 700px, 100px인 column 3개를 만들어야 하므로 footer 안에 div에
display:grid; grid-template-columns: 140px 700px 100px;선언- 좌우 영역은 너비를 그대로 가져가되 가운데 부분은 유동적으로 변하게 하려면
grid-template-columns: 140px 1fr 100px;로 선언. - fr은 남은 영역을 분할하여 사용한다. 1fr 2fr 2fr하면 5fr 중 각각 1, 2, 2개를 차지하는 것.
- 좌우 영역은 너비를 그대로 가져가되 가운데 부분은 유동적으로 변하게 하려면
- 나머지 detail styling은 알아서 해보기.
- 로그인만을 위한 페이지이므로 따로 header나 footer는 주지 않고 작업해보자.
- 논리적 순서를 보자면 로고, 아이디입력칸(+에러메시지), 비밀번호입력칸(+에러메시지), 로그인상태 유지 버튼, (데스크탑의 경우 IP보안 버튼,) 로그인버튼 순서.
- 로고는 heading으로, 나머지 모든 요소는 form태그 안에.
- 아이디와 비밀번호는 같은 스타일링을 위해 동일하게 두개를 넣도록 div 속 label과 input, 그리고 에러메시지 span태그를 넣는다.
- 아이디/비밀번호 둘다 input 영역만 있고 따로 label은 없지만 그래도 만들어놓고 안보이도록 처리하면 된다.
- 에러메시지는
display:none으로 해두고 invalid 상태클래스일 때display:block이 되도록 해두면 되지만 스크린리더에 더 임팩트있게 튀어나오도록aria-live를 활용할 수도 있으니 한 번 search 해보자.
- 아이디와 비밀번호 div 밑에 로그인상태 유지와 ip보안 버튼은 div로.
- 로그인 상태 유지 버튼은 input 태그를 이용하되
type="button" id="btnKeepLogin"으로 하고 뒤의 로그인상태유지 텍스트를 label처리 하여<label for="btnKeepLogin">해주기. - 로그인 상태 체크박스를 커스터마이징 하려면 reset하기 귀찮으니까 그냥 input영역을 안보이게 하고 label 속에 span을 넣어서 background-image 깔아주고 체크 시 색깔 변하게 설정하면 된다.
- IP보안 버튼도 span 태그 속에 input과 label을 포함시켜 동일하게 작업한다.
- 로그인 상태 유지 버튼은 input 태그를 이용하되
- noopener과 noreferer 개념도 찾아보자.
transition을 사용한 애니메이션도 간편해서 좋다.- 같은 효과를 줄 수 있는 다양한 방법을 알아가는 것이 즐겁고 뿌듯.
- grid의 손쉬운 적용에 또 감탄이 나온다. IE 호환이 안되는 게, 그리고 그 IE를 우리나라에서 대부분 사용한다는 게 안타까울 정도이다.