1.정렬 css를 써서 이미지가 좌측으로 글은 우측으로 잘 정리되었습니다. 하지만 짧은 글 같은경우(하나는 제목이 없고, 하나는 이미지가 없는 글(article) 박스가 깨지더라구요. 이부분은 어떻게 해야할지요? article 박스 최소 크기를 늘려야할지요.
이미지가 글박스의 범위를 벗어나는 것은 atticle 태그에 일부 설정이 안돼서 그렇습니다.
책에서 샘플 콘텐츠는 긴 내용의 글만 넣어서 저도 그런 현상을 발견하지 못했네요. 이것을 수정하려면 책에서도 멏군데 방법이 나옵니다.
530p와 606p입니다.
CSS에서 다음과 같이 overflow:hidden;을 article 태그에 삽입하면 해결됩니다.
article {
position: relative;
overflow: hidden;
}
3. 513p에서 검색박스가 테두리를 벗어나는 것을 방지하기 위해 미디어쿼리에 영역 설정을 할 때 왜 min-width:768px and max-width:979px에 써야하나요?
499p에 부트스트랩의 기기별 사이즈가 있습니다. 이대로 해야하죠.
기기별 사이즈에 대한 질문이 아니라 왜 저 사이즈(비율)에 검색 박스 크기 설정을 한것인가요?
미디어쿼리에 있는 다른 사이즈(min width:480 and max width:767)에 적용해도 상관 없는건가요?
왜 그 사이즈에만 검색 박스의 크기를 설정했는가는 그 사이즈에서 화면 폭이 줄어들면 사이드바가 같이 줄어들어서 검색박스가 튀어나오기 때문이고 그 이하의 사이즈에서는 사이드바가 컨텐트영역의 하단으로 내려가므로 튀어나올 염려가 없기 때문입니다.
그리고 저 검색박스 자체를 알아서 줄어들고 길어지게 만들 수 없을까요?(화면폭을 정말 좁게 만들면 결국 박스가 테두리 밖으로 나와서요.)
검색박스를 max-width를 적용하면 되겠죠. 실험해보지는 않았지만 검색박스는 일정한 폭을 유지해야 입력할 수 있기 때문에 화면 폭에 따라서 줄어들거나 늘리는 것은 바람직 하지 않습니다.
또, 왜 form에 css를 입히나요? (#searchform이 아니라)
여기서 form을 대상으로 하는 것이 아니라 선택자를 특정하기 위한 것입니다. 370p의 복합선택자 부분을 참고하세요.
4. 508p 에 클래스 선택자를 여러개 넣을 때 <div class="container wrapper"></div> 이면 css에서 .container{}으로 꾸미고, .wrapper{}로 꾸밀 수 있다는 거죠? 서로 충돌할시에는요? 그때는 가장 마지막에 입력된(하단에 가까운) 부분이 우선 적용 되겠죠?
네 그렇습니다. <div class="container wrapper">처럼 두개 있는 경우 만일 container에 변경을 가하면 모든 container 클래스에 적용되므로 하나만 적용하기 위해서입니다. 충돌을 방지하기 위해서죠.
5. 클립이 잘라내는 명령이라는것은 만약 clip: rect(1px 1px 1px 1px); 이면 사방에서 1px씩 잘라내었다는 의미인가요? (좌측에서 우측으로 1px, 위에서 아래로 1px같이)
네 좌측에서 1픽셀까지 우측에서 1픽셀까지니까 안보이죠.
6. 485p에 왜 content.php를 수정하는게 아니라 index.php를 수정하나요?- 어떤 영역을 수정해야할지 정확히 캐치하지 못해서 생기는 문제같습니다. (3번질문과 연결되는듯)
content.php는 글 내용을 가져오는 역할만 합니다. 505페이지를 보면 레이아웃을 적용하지 않는다고 나오죠. 이 파일은 레이아웃과는 관계없고 다만 index.php에서 <?php get_template_part( 'content', get_post_format() ); ?>라는 템플릿 태그에 의해 content.php파일이 만든 글을 불러오게 됩니다. 마치 <?php get_header(); ?>의 역할을 하는 것과 같죠.
7. 477p, 대기시키는 함수의 용도는? 그 안의 "."의 용도는? css에는 왜 버전 삽입 안하는지요?
대기함수는 내가 워드프레스 사이트에 접속하면 서버로 부터 스타일시트나 자바스크립트를 내려받습니다. 화면에 나타나는 것이 아니라 내 컴퓨터의 메모리에 있는 것이고 필요할 때 작동합니다. 그래서 대기시키는 것이죠.
여러개의 자바스크립트가 있는 경우 같은 종류면 충돌이 일어나므로 대기시킨 것 중에서 필요한 것만 사용하도록 합니다.
점( . )의 용도는 php 언어에서 두개의 스트링을 연결시켜주는 역할을 합니다. 템플릿 태그와 일반 글자를 연결하기 위해서 사용합니다. 자바스크립트는 업그레이드 되면서 버전이 있을 수가 있지만 CSS는 업그레이드라는 것이 없죠. 그래서 필요없습니다.
8. 474p 여기는 왜 상대경로가 되는지?
상대 경로가 아닙니다. 476p를 보면 스타일시트 폴더를 표시하는 템플릿 태그인 get_stylesheet_directory_uri()는 절대 경로를 만들어줍니다. 그 다음에 assets~~가 나오죠. 이 둘을 이어주는 역할을 하는 것이 점(.)입니다.
474p를 보면, @ import 라고 써있잖아요. 여기에 사용된 ".." 상위 폴더로 간다는 의미 아닌가요?
맞다면 이건 상대경로가 맞지 않나해서요.
스타일시트 같은 곳에선 상대주소를 사용해도 됩니다. 물론 절대주소를 사용해도 되죠.
9. 423p, margin right에 마이너스값을 줬는데 요소 검사해보면 우측으로 공간이 더 늘어났어요. 이 부분이 이해가 안됩니다.
플러스 값을 적용하면 요소의 폭이 늘어나죠. 그러면 이웃해 있는 요소와 충돌이 일어나서 아래로 내려갑니다. 아래로 내려가지 않도록 하면서 범위를 벗어나게 하는 방법이 마이너스 값을 적용하는 것입니다. CSS를 사용하면서 이런 방법을 잘 사용하지 않지만 이런 특별한 부분에서 적용하면 문제해결이 쉽습니다. 이런 방법을 대부분 잘 모르죠. CSS에서 마이너스 값는 요소를 배치할 때 아주 유용하게 사용됩니다. 뭔가 배치가 잘 안될 때 사용하죠.
10. 415p, id 와 class 같이 쓰면 충돌하지 않는가요?
id 와 클래스는 같은 이름이라 해도 충돌을 일으키지 않습니다.왜냐하면 우선 순위가 있기 때문이죠. 371p에 선택자의 우열에 관한 내용이 있습니다.
