Dongho Lee

https://cafe.naver.com/wepub/7589 위 링크에서 첨부파일을 확인하시면 됩니다. 확인이 안되시면 알려주세요 감사합니다.

이메일/이벤트 실습 예제 파일

<thead> <th scope="col">구분</th> <th scope="col">정의</th> </thead> 로 쓰셨는데,&nbsp; thead 자식으로 tr을 쓰고 그 안에 th를 쓰시면 됩니다. tr이 빠져서 나는 오류 같습니다. 참고)
<thead> &nbsp; <tr> &nbsp; &nbsp; <th scope="col">구분</th> &nbsp; &nbsp; <th scope="col">정의</th> &nbsp; </tr> </thead>

마크업 실습 관련 질문입니다.

네 요즘엔 이미지를 안쓰고 메뉴를 만드는 경우가 확실히 많아졌습니다.
하지만 서체 디자인이 딱 들어맞지 않는다면 이미지를 여전히 쓸 수 밖에 없습니다. 현재 '다음'메뉴도 PC 상태에서는 이미지로 보여지고 있거든요...
이미지를 png나 gif, jpg 가 아닌 svg 등으로 만들어서 쓰면 해상도나 디바이스에 관계없이 깨끗하게 보일 수 있습니다.

이미지를 안쓰고도 만들 수 있을거 같은데 이미지로 써서 만들때 어떤 장점이 있나요 ??

네, 이 부분이 어렵죠..
position: absolute 는 그걸 감싸는 position 이 기준이 되어 위치 지정(left, top, right, bottom)이 됩니다. 그리고 여기서 line-height를 이미지를 감싸는 높이 만큼 크게 지정한 상태에서 position: absolute 가 top: 50% 이므로 이미지를 반 쯤 걸리게 표현이 됩니다. 이 때 margin-top을 line-height의 반 만큼 거꾸로 지정하면 top 위치가 지정한 만큼 위로 올라가서 이미지를 모두 감싸게 됩니다.
그러면 overflow: hidden 을 감싸는 곳에 적용해서 벗어나는 박스를 필요한 만큼 남기고 잘라버리게 되는 방법입니다.
position 은 중요하므로 확실하게 이해하시면 좋습니다.&nbsp;

category를 top: 50% 했을 때 이동되는 위치들이 잘 이해가 안가네요ㅠ

실전에서 어떤 리더를 만나느냐에 따라 달라질 것 같습니다. 제가 지금 일하고 있는 프로젝트는 규모가 상당히 큰데 그 방법은 쓰고 있지 않네요... &nbsp;

css 하다가 궁금한게 있어서 질문드립니다 !

네 맞습니다. 클래스를&nbsp;<li class ="menu m1" > 처럼 쓰는 것이 더 좋은 방법입니다. 우선 처음 학습하실 때는 좀 더 단순한 방법으로 진행하는 것이 나을 것이라 생각해서 그렇게 했습니다.&nbsp;

<li class ="m1" > 을 m2 m3으로 나눠서 해야되는 이유가 있을까요 ??

네 맞습니다. background-size: cover 는 박스가 세로로 길면 세로에 배경 이미지를 맞추고 가로는 잘려 나갑니다. 가로가 길면 가로에 맞추고 세로는 잘려 나가게 됩니다.&nbsp;

cover 의미 질문있습니다. !

2번 라인 : lang=ko
7번 라인 : title은 꼭 작성하세요
13번 라인 : a요소로 '본문 바로가기'를 정확히 감싸주세요
19번 라인 : '웹 접근성 연구소' 이미지에 alt값을 썼으니 해당 텍스트는 없어도 됩니다.
21번, 31번, 45번 등 : h1 요소는 한 번만 나오는 것이 좋습니다.
25번 라인 : label과 nput을 따로 분라하시면 더 좋습니다. 버튼은 input type=image 형식을 요즘은 잘 쓰지 않아요. button 안에 image를 사용하시는 것이 더 낫습니다.
30번 라인 : nav 요소는 주로 메인메뉴에 쓰입니다.
128번 라인 : container 라는 태그는 없습니다. class 또는 id 의 값으로 쓰면 됩니다.
178번 라인 등 : p 요소 안에 텍스트를 억지로 줄을 바꾸면서 편집하지 않아도 됩니다.&nbsp;
195번 라인 : header 요소는 각 섹션의 헤더 영역이나 페이지 전체의 헤더 영역에 쓰입니다. 자주 나오면 안됩니다.
266번 라인 : #skip-nav 라는 것은 아이디의 값이 skip-nav 인 요소를 찾아 이동하게 됩니다. 그런데 해당 아이디 값을 지정한 것이 안보입니다.
&nbsp;
제가 너무 늦게 글을 봤습니다. 입문하신지 얼마 되지 않으신 것 같은데 열심히 하시는 모습 보기 좋습니다. html 문서 작성은 같은 페이지라도 작성자에 따라서 다양한 방법이 나올 수 있습니다.&nbsp; 그리고 참고하시는 페이지의 원ㄴ래 코드도 참고해 보시길 바랍니다.
감사합니다.

섹션닝으로 작성해봤는데 지적해주실만한 내용 있을까요 ?

1. 네 맞습니다. 기본적으로 저장을 하면 확장자에 따라 파일의 특성이 지정된느 것 같아요
&nbsp;
2. 보통 텍스트를 쓰다가 탭을 누르면 해당 텍스트가 html 같은 요소로 지정되기도 합니다.&nbsp; &nbsp; &nbsp; &nbsp;프로그램을 새로 실행시키면 다시 정상동작한다는 걸로 봐서는 프로그램의 단순한 버그 같기도 합니다.
&nbsp;
에디터는 서브라임을 써도 되지만 VScode 또는 Bracket, Atom 등 어떤 걸 써도 무방합니다. 서브라임을 쓰다가 다른 것도 써 보시기 바랍니다.

탭 / 쉬프트 탭으로 들여쓰기와 들여쓰기 삭제하기

답변이 늦어져서 죄송합니다. html4에 대한 내용은 더 이상 신경쓰지 않아도 됩니다. section 요소는 자유롭게 사용해도 되고 거의 모든 브라우저에서 문제가 없습니다. 그냥 div를 쓰는 것 보다 section요소를 쓰면 시맨틱에 더 가까워 좋은 마크업이 될 수 있습니다.

Dongho Lee

Posts