생각하며 글을 쓰는 사람

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

html과 css를 다루기 어렵다면 부트스트랩을 이용하시면 됩니다. html에 부트스르랩을 설치하는 방법을 설명하겠습니다. 일단 부트스트랩 홈페이지에 방문을 해보겠습니다. https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 시작하는 방법은 아주 간단합니다. 사이트의 Docs에 들어가서 퀵스타트를 보시면 됩니다. 부트스트랩의 css와 javascript 파일을 자신의 html에 붙여넣기는 하면 끝납니다. css cdn은 자신의 head 태그 안에 넣으면 됩니다. javascript cdn은 자신의 body 태그 끝나기 전에 넣으면 됩니다. 그럼 다 설치된 모습을 ..

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

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..

반응형 웹을 만드려면 먼저 설정을 해주어야 합니다. 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..

이전에 가로 정렬을 하려면 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 예제를 작성 해보겠습니다. 아래의 그림과 같은 양식을 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..

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..

navbar 안에 있는 모든 li 에 적용하고 싶다면... 스페이스바를 이용하면 됩니다. .navbar li { display : inline-block; } navbar 안에 직계 자식에게 적용하고 싶다면, > (꺾쇠괄호) 를 쓰면 됩니다. .navbar>li { display : inline-block; } a(링크) 태그에서 밑줄을 제거하고, 방문시 보라색으로 변경되는 것 제거하기 링크 .link { text-decoration : none; } .link:visited { color : black; } css로 배경넣기 .mainBack { width: 100%; height: 500px; background-color: rgb(18, 128, 172); background-image: url(/..

이번글에서는 css - display : inline-block을 사용해보겠습니다. 이전에 블로그 글에서 가로로 정렬할 때 float : left 를 사용했습니다. 그러나 이것만 쓸 수 있는 것은 아닙니다. 지금 만들 것은 아래와 같은 레이아웃을 만들어 보도록 하겠습니다. display : inline-block 을 content와 menu에 넣어주면 됩니다. display : inline-block을 사용 .container { width: 800px; } .header { width: 100%; height: 50px; background-color: rgb(100, 237, 123); } .content { width: 80%; height: 400px; background-color: coral;..