Programming 썸네일형 리스트형 [웹페이지 모작] BYN CORP 중단 아이템 구현 See the Pen 중단 메뉴 1차 by 김기태 (@kkt9102) on CodePen. @media (max-width:768px) { .middle-count .event { float:none; margin-left: auto; margin-right: auto; } .middle-count > .event > .under-line { width:600px; transform:translatex(-36%); } } *숫자 카운트 부분은 자바스크립트 같으므로 추후 작업........... 더보기 [웹페이지 모작] BYN CORP 모작 상단 메뉴바 작업 See the Pen BYN 상단메뉴바 3차작업 by 김기태 (@kkt9102) on CodePen. @media (max-width:1440px) { .con { max-width:1440px; } .content-video { height:770px; } } @media (max-width:1024px) { .con { max-width:1024px; } .content-video { width:100%; height:770px; } .menu-box-1 { visibility:hidden; } .top-bar > .logo > a > img { margin-left: 50%; } .lang { margin-right:90%; } } @media (max-wdith:768px) { .con { max.. 더보기 [CSS] @media 간단하게 알아보기 반응형 웹 사이트를 만들 때 쓰이는 것이 미디어쿼리 입니다. 미디어쿼리란 간단하게 다양한 사용자들이 각각 다른 크기의 화면을 통해 웹 페이지를 접하는데 각 화면의 크기에 맞게 스타일시트 설정을 해주는 것 입니다. 즉, 각기 다른 화면의 웹 페이지를 다 만드는 것이 아니라 한 스타일시트 내에 일정 크기의 화면 크기 설정을 해준 후 다양한 사용자들의 화면 크기에 맞게 웹 페이지의 스타일이 자동으로 바뀌게 해주는 것 입니다. @media (max-width:1024px) @media (min-width:768px) 1024px 이하의 넓이에서 적용 768px 이상의 넓이에서 적용 미디어쿼리를 작성 시 주의할 점이 있는데 만약 max-width 를 쓰게 된다면 위에서부터 넓이가 큰 화면 설정부터 적용키셔주고 m.. 더보기 [모작연습] BYN 모작 최상단 구현 더보기 [모작연습] BNX 사이트 만들기 (1) See the Pen BNX 사이트 모작 1 by 김기태 (@kkt9102) on CodePen. 더보기 [모작연습] BYN 메뉴바 레이아웃 잡아보기 See the Pen BYN 모작연습 by 김기태 (@kkt9102) on CodePen. 더보기 [CSS] margin padding margin 과 padding 속성은 여백을 준다는 속성은 같지만 확실한 차이가 있는 값 입니다. padding margin 뜻 안쪽에 공간을 준다 바깥쪽에 공간을 준다 See the Pen padding margin by 김기태 (@kkt9102) on CodePen. 위에 코딩을 보면 먼저 모든 박스에 공통으로 width:100px height:100px border:5px solid black 을 주고 각각 박스에 다른 색을 넣어준 후 1번 박스에는 margin:10px 을 주었고 2번 박스에는 padding:10px 을 주었습니다. 1번 박스의 경우 박스의 위치가 움직인 것 처럼 보이지만 사실은 박스 바깥에 10px의 공간이 생겨서 박스 자체가 움직인 것 처럼 보이고 2번 박스의 경우 박스 크기가.. 더보기 [예제]top-menu, side-menu, image See the Pen side-menu, top-menu,img by 김기태 (@kkt9102) on CodePen. 더보기 이전 1 ··· 6 7 8 9 10 다음
