생각하며 글을 쓰는 사람

시멘틱 태그에 대해서 정리를 하겠습니다. 간단하게 적습니다. : 머리말에 해당합니다. 주로 웹페이지의 상단에 있습니다. 로고나 메뉴 등을 넣는 공간입니다. : 링크 등의 메뉴 영역입니다. 링크와 메뉴를 그룹화를 할 때 사용합니다. 모든 링크와 메뉴를 일일이 nav 태그에 넣을 필요는 없습니다. : 동영상, 사진, 멀티미디어를 넣는 영역입니다. 메인 페이지의 이미지 슬라이드 부분 : 웹 문서의 본문, 중요한 콘텐츠를 그룹화할 때 사용 : 본문과 연관성이 적은 외부 영역, 광고의 팝업창 바로가기를 만들 때 사용 : 특정 영역의 그룹화, 연관성이 있는 콘텐츠를 그룹화 할 때 사용합니다. 신문에서 기사 제목 여러개를 section 태그 안에 담아서 사용합니다. : 개별 콘텐츠를 담는 영역입니다. 개별 글이나 기..

css 에서 예쁜 그림자를 넣기를 원하시면 코드를 잘 작성을 해야합니다. box-shadow: 좌우위치, 상하위치, blur(흐려짐 정도 범위), spread(그림자 크기), 색상 ; 이 코드를 잘 사용을 하면 됩니다. 이렇게 저렇게.... 막 수정하다가. 제가 딱 좋아하는 그림자를 찾아내게 되었습니다. 그림을 확인 해보시기 바랍니다. 예쁘지 않습니까????? 너무 과하지도 않고, 부담스럽지도 않고 ㅋㅋㅋㅋ 딱~~ 좋네요 ㅎㅎㅎ 코드는 이렇게 작성을 하였습니다. 일단 전체적인 코드는 다 적기는 너무 많고.. 부트스트랩을 이용했다고 보시면 됩니다. 그리고 핵심적인 코드 입니다. 참고하시기를 바랍니다. .practiceShadow { box-shadow: 0px 0px 20px 1px rgb(200, 200..

내가 원하는 사이트에 애니메이션이 무엇이 있는지 알고 싶다면 크롬 갭발자 도구를 이용하면 됩니다. 빨간색을 따라가서 애니매이션을 누르면 됩니다. 애니매이션을 만들려면 Transition 을 이용해야 합니다. 1. 시작 스타일을 정해야 하고 2. 끝나는 스타일을 작성해야 합니다. 대부분 :hover 마우스를 올릴 때 최종 스타일을 지정합니다. 3. Transition 을 지정해주면 됩니다. html을 작성해 줍니다. price 클래스가 위로 올라가는 것입니다. 마우스를 올릴 때 작동하게 하려면 div를 하나 더 만들어서 그안에 넣어주고, 이 놈을 position을 이용해서 공중부양을 시킵니다. 그리고 기존 img 를 다 감싸도록 폭과 너비를 100%로 해줍니다. css를 작성을 해줍니다. div를 하나 더..

아오..... 애증의 인터넷 익스플로러 ㅜㅠ 조건부로 익스플로러 버전용 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..