css 관련으로 질문 몇개 써봅니다.
본문
안녕하세요 좋은아침입니다. 독학으로 공부중인 사람인데요.. 이 초보딱지는 언제 뗄수있으련지 ㅠㅠ
sir에서 테마를 받아와서 고쳐나가는 식으로 연습해오다가 역시 밑바닥부터 실전으로 만들어보는것도 중요한것 같아서 해보는중인데 잘 안돼서 질문 남겨봅니다
한번에 여러개 질문 남기면 답변주시기 힘드실걸 알지만 나눠서 쓰자니 도배인거같아서..
혼자하려니 너무 어려워서 잘 아시는분들이 도움주셧으면 좋겠어요..
1.
반영이 빠른 익스를 보면서 수정하는편인데, 익스에 맞춰두면 다른 브라우저에서 위치가 엇갈리거나 하는 경우가 있더라구요. 위 이미지처럼 검색버튼이 따로 움직인다던가 메뉴가 잘려서 2줄로 보인다던가 하는..
(검색창이랑 검색버튼 둘다 input type으로 작성했는데 text랑 submit이랑 크기가 다르더라구요..)
이걸 어느 브라우저에서 보든 같게 보이게끔 하는 css같은건 없을까요?
2. 책에서 display:flex; 라는걸 배웠는데요. 실제로 적용해보니 반응이 없더라구요.
사용하려던 부분이 [같은 선상에 div 두개를 나열 하는 법] 이었어서 display:inline-block으로 대체해서 해결보긴 했는데 제가 공부하는 책 초판이 이번달 초에 나왔는데 그새 display:flex; 사용이 막혔을리는 없고 해서.. 해당 명령문은 사용이 안되는건가요?? 혹시 가능하다면 display:flex;는 정확히 어떤 명령을 해야할때 사용하면 좋을지 알려주셨으면 합니다
3. 마지막으로 메인 메뉴 background 에 관한 질문인데요. 이것때문에 독학을 시작했는데 어느 책을 봐도 알려주질않더라구요..
하단의 이미지는 교학사( http://www.kyohak.co.kr/ ) 의 메인메뉴인데, 해당 부분같이 원하는 li마다 다른 배경 효과를 주는건 어떻게 하는건가요? background:url(이미지링크) 처럼 하는 방법도 있겠지만 그렇게 넣었을 경우에 확대/축소 하면 li와 안맞게 보이더라구요
한꺼번에 많은 질문 정말 죄송합니다 고수님들의 똑똑한 답변 기대합니다.... ㅠㅠ
답변 2
일단 정정 할건 하고 답변 드리겠습니다. 반영이빠른 익스 <<< 잘못 알고 계신겁니다. 익스플로러가 반영이 더 빠르지 않습니다 남은 캐쉬 같은 부분 때문에 그런거 같은데 그런 부분이라면 캐쉬삭제나 크롬에 disable cache 옵션을 켜고 작업 하시는 편이 더 편할 겁니다.
1. 어느 브라우저에서 보든 같게 보이는 css 는 없습니다. 원래는 다 같게 보여야 하는데 조금씩 차이가 있을 수 있습니다. 여러 브라우저를 보면서 확인 하며 수정 해야 해요 특히 익스플로러는....
2. flex 는익스플로러는 11 버전 이상 부터만 지원을 하며 크롬은 29버전 파이어폭스는 28 버전 부터 지원 합니다. 그 이하 버전에서는 사용 할 수 없습니다. 그래서 사용자의 폭이 넓은 홈페이지나 일반 랜딩페이지에서같은 경우에는 잘 사용 되지 않습니다.
3. 해당 사이트는 li 마다 다른 배경을 준게 아니라 메뉴 자체를 덮고 있는 div 에 background 를 지정 한겁니다 통 이미지로 크게
안녕하세요 유레카56님
정신없는 질문들에도 깔끔하고 명확하게 답변주셔서 감사드립니다.
말씀대로라면 flex는 보는 사람에 따라 배치가 망가질테니 가능하면 안쓰는 편이 좋겠네요 ㅠ
3번의 답변으로 통 이미지로 크게 background를 지정해준거라고 하셨는데, 어느정도 큰 이미지여야 확대/축소를 해도 원하는 li와 맞게 이미지가 안밀리고 그대로 있을까요? 예전에 이런식의 모습을 구현하고싶어 가로 약 3000px짜리 이미지를 넣어봤는데 그래도 확대하면 옆으로 밀리더라구요..
3번 답변을 잘못 드렸네요 해당 사이트는 div에 백그라운드 이미지를 repeat-x 로 나열 시키고 링크를 백그라운드가 아닌 이미지 자체로 만들어 두었습니다 잘못 확인 하여 정정 드리며 확대/축소 할때 li와 맞지 않는 다고 하셨는데 background-size 가 cover 이면 확대 축소 시에도 다 덮을 겁니다 그런데 이게 정답은 아니고 상황에 따라 적용 하는건 달라질 수 있습니다.
아하 cover를 쓰는 방법도 있었죠 유레카56님 덕분에 골머리앓던 부분 배워갑니다 늦게 댓글 확인해서 죄송하고 알려주셔서 정말 감사해요!
1. 모든 브라우져에서 볼 수 있게 크로스브라우징을 해서 맞춰줍니다.
브라우져 별로 표현방식이 약간씩 상이하므로 다르게 표시 될 수 있습니다.
2. display:flex는 독립적이지 않습니다.
추가 css를 사용하므로 완성되는 형태입니다.
참고하시면 되겠습니다.
3.기본은 *.css 파일 기준
.aaa {background:#000;}
.aaa {background-color:#000}
.aaa {background-image:url('이미지')}
이러한 형태들로 사용됩니다.
웹사이트를 페이지를 보시려면 css, js, jquery, javascript, json, ajax를
많이 사용하는데 이들의 오류를 파악하거나 수정을 해본다거나 할때
크롬 요소검사(개발자도구)를 사용하셔서 이것저것 만져보시는 훨씬 빠릅니다.
(파이어폭스, 인터넷익스플로러, 크롬, 사파리 등등 개발자모드 열기 단축키는 F12번)
