생각하며 글을 쓰는 사람

아오..... 애증의 인터넷 익스플로러 ㅜㅠ 조건부로 익스플로러 버전용 CSS파일 첨부를 할 수 있습니다. 익스플로러 X 버전 이하에서만 적용할 수 있는 CSS파일을 첨부할 수 있습니다. 첨부해주시면 css폴더내의 ie8.css 라는 파일은 인터넷 익스플로러 9 미만에서만 적용됩니다. 저걸 [if lt IE 10] 이렇게 바꾸면 익스플로러 10 미만에서만 적용됨 이렇게 첨부하신 후 ie8.css에 여러분이 수정하고 싶은 코드를 담고 head태그 내에 다른 CSS 파일들과 함께 첨부해주시면 됩니다. 참고로 ie8.css 파일은 다른 브라우저에선 전혀 읽혀지지 않습니다. link 태그 첨부 순서는 가장 마지막이 좋음 그리고 클래스 명을 ie--explain-container 라고 해주면 좋음

float 를 이용한 코드를 작성하면.... 피자 풍부한 토마토 소스 햄버거 풍부한 불향 치킨 깊은 간장맛 콜라 느끼함을 제거하는 맛 .explain-container>div { float : left; width : 25%; } @media screen and (max-width : 992px) { .explain-container>div { float : left; width : 50%; } } @media screen and (max-width : 768px) { .explain-container>div { float : none; width : 100%; } }

부모 요소에 적용하고 display: flex justify-content: center; align-items: center; flex-wrap: wrap; 자식에게 폭만 잘 지정해주면 이러한 것을 폭을 줄여주면 잘 넘어간다. 그러나 테블릿 일 때 2단으로 보여주고 모바일 화면일 때 80%찬 화면으로 보여주려면 미디어 쿼리도 잘 써줘야 한다. 코딩을 시작하면.... html 부분은 단순함 피자 풍부한 토마토 소스 햄버거 풍부한 불향 치킨 깊은 간장맛 콜라 느끼함을 제거하는 맛 css 부분에는 특별하게 미디어쿼리를 사용한다. .explain-container { font-size: 25px; text-align: center; display: flex; justify-content: center; ali..

1200px 768px 이렇게 두개만 골라서 1200px 이하는 태블릿, 768px 이하는 모바일

반응형 웹을 만드려면 먼저 설정을 해주어야 합니다. meta 태그를 추가해야 합니다. 1. rem 이라는 단위를 사용할 수 있습니다. 기본 폰트 사이즈가 있다면 = a 1.5rem 을 사용하면 >> a x 1.5 가 됩니다. 기본 폰트를 적용하지 않으면 16px이 적용되어 사용됩니다. 2. vh 를 사용하면 빈 화면에서 스크롤이 가능하게 됩니다. vw 는 그 반대의 개념입니다. 폭 개념 .class { width : 16px; /* 기본 px 단위 */ width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */ width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */ width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */ width..

head 태그 안에 들어가는 요소를 공부하겠습니다. 1. 사이트의 인코딩 형식을 지정할 때 charset="UTF-8" 이라고 속성을 적을 수 있습니다. 2. 사이트의 구글 및 다른 검색엔진의 검색 결과 화면에 뜨는 글을 수정하고 싶으면 속성들을 추가할 수 있습니다. description은 구글 검색시 파란 제목으로 뜨는 글 keywords는 검색에 도움을 주는 키워드 (검색엔진 최적화에 필요한 요소입니다.) 3. 사이트 초기 zoom 레벨이나 폭을 지정해주려면 name="viewport" 라는 속성을 부여하시면 됩니다. width=device-width는 모바일 기기의 실제 폭으로 렌더링 하라는 뜻입니다. 요즘 스마트폰 가로 해상도가 높은 기기들이 많이 있습니다. 그래서 실제 접속시 스마트폰 기기의 실..

이전에 가로 정렬을 하려면 float : left; 를 사용했었습니다. 그러나 더 좋은 방법이 있습니다. 부모 div안에 자녀 엘리먼트가 많다면? 부모 div 안에 display : flex; 를 넣어주시면 쉽게 가로 정렬이 됩니다. .flex-container { display : flex; justify-content : center; /* 좌우정렬 */ align-items : center; /* 상하정렬 */ flex-direction : column; /* 세로정렬 */ flex-wrap : wrap; /* 폭이 넘치는 요소 wrap 처리 */ } 요소의 폭이 커도 넘어가지는 않습니다. 그러나 flex-wrap : wrap 사용하면, 요소의 폭이 넘어가면... 다음 줄로 넘어가게 됩니다. fle..

기본적으로 웹페이지에 폰트를 적용하는 방법 구글 폰트를 사용하면 편합니다. 구글 폰트에 들어가서 임포트 하면 됩니다. @import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap'); body { font-family: 'Do Hyeon', sans-serif; } 만약에 사용자의 컴퓨터에 폰트가 없고, 호스팅된 내 하드의 폰트를 사용하고 싶다면? @font-face { font-family : '내가원하는이름'; src : url(../font/nanumsquare.ttf) } 웹폰트용 woff파일 웹폰트용으로 나온 woff 파일이 있습니다. ttf에 비해 용량이 3분의1 수준입니다. 한글폰트 ttf 파일은 용량이 매우 큽니다...

css 코드를 짜다보면 필요없는 중복을 많이 하게 됩니다. 그리고 코드가 길어질 경우에 엉망이 됩니다. 그런 경우에 OOCSS(Object Oriented CSS) 방식을 사용 해주시면 됩니다. 1. 버튼의 기본 스타일인 padding, font-size 이런걸 정의하는 class를 하나 만들기 2. 버튼에 스킨 색깔놀이 하는 용도의 class를 여러개 만들기 .main-btn { font-size : 20px; padding : 15px; border : none; cursor : pointer; } .bg-red { background : red; } .bg-blue { background : blue; } 확인버튼 취소버튼 색갈별로 분리를 해주면 좋습니다. .bg-red { background : ..

css pseudo-class 를 공부하기 이전에 버튼을 하나 만들어 보겠습니다. 제출하기 .btn { padding: 15px; font-size: 25px; border: none; border-radius: 10px; font-family: 'Do Hyeon', sans-serif; background-color: tomato; color: white; cursor: pointer; } .btn:hover { background-color: brown; } .btn:focus { background-color: rgb(88, 88, 88); } .btn:active { background-color: rgb(255, 0, 0); border: 1px solid black; } pseudo-class..

html에서 테이블을 쓰려면 div > table > tr > td 만 아시면 됩니다. tr은 행을 만들고, td는 열을 만들게 됩니다. 그리고 table 태그를 사용할 때는 div 태그 안에 넣어주면 좋습니다. 더 자세하게 정리를 한다면~~ table태그 내에 tr은 row, td는 column을 의미하게 됩니다. 그리고 먼저 tr을 사용하고 그 안에 td를 써야 합니다. tbody, thead는 그냥 헤드부분 영역구분을 위해 사용합니다. td 대신 th 태그를 사용하면 기본적으로 제목처럼 굵게 처리됩니다. 그리고 리셋 css는 꼭 설정을 해주셔야 합니다. 1 2 3 이름 직책 특기 갤럭시 개발자 치킨먹기 td, th { border: 0.5px solid black; } 테이블 셀 내에서 상하정렬할 ..

html 예제를 작성 해보겠습니다. 아래의 그림과 같은 양식을 form과 input을 이용하여 작성을 해봅니다. div, input, textarea 에 대해서 먼저 설정을 할 것이 있습니다. border-box 를 먼저 설정을 해야 합니다. 왜야하면 css에서 크기를 설정할 때 원하는 크기를 얻으려면 테두리와 안쪽 여백을 고려해야 합니다. box-sizing: content-box; 를 설정하고 폭을 100% 한 이후에 패딩을 주면 우리가 설정한 예상 범위를 넘어가 버립니다. 그래서 box-sizing: border-box; 를 주어야 합니다. div, input, textarea 에 먼저 box-sizing: border-box; 를 설정해줍니다. div, input, textarea { box-si..

form태그 input태그는 닫지 않습니다. 인풋태그에는 여러가지 옵션이 있습니다. input의 type 가장 많이 사용이 되는 옵션 들입니다. 종류가 여러가지가 많이 있습니다. 암기를 하시려고 하면 안됩니다. 구글에서 필요할 때 검색을 해서 찾아서 쓰면 됩니다. 옵션1 옵션2 옵션3 input에 넣는 속성들 placeholder는 배경 글자입니다. 흐릿한 회색으로 보입니다. value는 미리 입력된 값입니다. name은 서버 기능개발에 필요한 인풋의 이름을 설정 가능합니다. HTML의 셀렉터 HTML의 속성으로 CSS셀렉터를 사용할 수 있습니다. input의 type속성이 text인 요소만 찾아서 스타일을 줄 수 있습니다. 폼에서 특히 유용하게 사용합니다. 마진, 패딩, 글자 크기 등을 자유롭게 줄 수..

CSS normalize html, css 코딩을 하다보면 문제가 생깁니다. 같은 코드를 짜도 다른 브라우저에선 이상하게 보일 수 있습니다. 브라우저마다 의 스타일이 다르고, 가끔 line-height 이런 줄간격같은 것도 다르고 다음 시간에 배울 사이즈도 다르기 때문입니다. 브라우저간 통일된 스타일을 줘야합니다. 특정 옵션을 css 맨 위에 적고 코딩을 시작해야 합니다. CSS Normalize 링크 : https://github.com/necolas/normalize.css/blob/master/normalize.css 그래서 이 링크는 CSS normalize 라고 만든 문서입니다. 여기있는 스타일 붙여넣으시면 브라우저간 다르게 보이는 문제들을 미리 해결할 수 있습니다. 그래서 여기 있는 스타일을 ..

body에는 설정하지 않아도 margin이 들어있습니다. 제거를 시키려면, 설정을 해줘야 합니다. 이러한 설정 말고도 reset css를 이용하면 좋습니다. 좌표이동 css에서 좌표이동을 할 수 있습니다. position을 이용하는 것입니다. positon은 원하는 것을 공중에 띄워서 좌표이동이 가능하게 하는 겁니다. 먼저 좌표에 대해서 살펴보면... .box { top : 20px; left : 30%; } top, left, bottom, right 라는 속성을 사용하면 요소의 상하좌우 위치를 변경할 수 있습니다. 이 좌표속성을 사용하려면 position 속성이 필요합니다. position 속성은 좌표속성을 적용할 기준점을 지정해주는 역할입니다. .something { position : static..