코딩의 즐거움/CSS
-
[ 코딩 ] css float 이미지 일정하게 배열하기코딩의 즐거움/CSS 2021. 1. 11. 12:00
[ 코딩 ] css float 이미지 일정하게 배열하기 위 이미지처럼 일정한 간격으로 사진이 나열되도록 하기 위해서 float을 사용해주면 된다. 우선 전체 코드를 작성한 후 완성된 모습을 확인하고, 하나하나씩 설명해보도록 하겠다. 전체 코드 작성 위 첨부한 이미지처럼 코드를 작성해주고, 웹페이지를 실행시키면 일정한 간격으로 배열된 이미지를 확인할 수 있다. 우선 body안에 적혀 있는 코드를 살펴보자 body 태그 안에 html 코드만 작성해주고 웹페이지를 실행시키면 위와 같이 150x170 사이즈의 회색이미지가 일렬로 나열되게 나타난다. 코드를 살펴보면 div 태그에 아이디 선택자를 사용해서 id="wrap"으로 이름을 부여해줬고, div가 전체 article 태그와 img 태그를 감싸고 있다. 디자..
-
[ 코딩 ] css float으로 왼쪽 오른쪽 정렬하기코딩의 즐거움/CSS 2021. 1. 4. 12:00
[ 코딩 ] css float 왼쪽 오른쪽 정렬하기 float은 태그를 왼쪽으로 또는 오른쪽으로 정렬해주는 기능을 가지고있다. float: left; 왼쪽 정렬 float: right: 오른쪽 정렬 float은 이미지로 확인하는 게 이해하기가 쉽다. 아래는 float 왼쪽 정렬 전 후 이미지다. float을 사용하기 전에는 수직으로 쭉 나열되어 있는 노란색 하늘색 보라색 박스들이 float:left;를 적용했더니 가로로 위치가 변한 걸 볼 수 있다. 그럼 코드를 작성해서 확인해보자. 먼저 html 코드를 작성해 준다. body 태그 안에 div 아이디(#)wrap으로 div class(.)box1, .box2, .box3을 묶어줬다. head 태그 안에 style 태그를 적어서 아이디(#)wrap과 클래..
-
[ 코딩 ] css font 속성 알아보기코딩의 즐거움/CSS 2021. 1. 1. 12:00
[ 코딩 ] css font 속성 알아보기 글자에 적용하는 font 속성에 대해서 알아보자. font-family : 폰트이름(영문), 대체 폰트; 일단 앞쪽에 폰트이름(영문)부터 보자면 컴퓨터로 다운받은 폰트만 적용이 가능하며, 다운받아서 설치한 폰트의 영문 이름을 적어주면 사용이 가능하다. 뒤쪽에 대체 폰트라고 적은 부분은 앞쪽의 폰트이름(영문)이 적용이 안될 경우 사용할 폰트를 말한다. 여기에 들어갈 대체 폰트는 정해져 있다. sans-serif : 굵기가 균일한 고딕계열 폰트 (나는 보통 요 폰트를 넣어둔다) serif : 글자 획에 삐침이 있는 바탕체의 폰트 monospace : 폭과 간격이 일정한 폰트 cursive : 손으로 쓴 듯한 필기체의 폰트 fantasy : 개성있는 특이한 모양의 폰..
-
[ 코딩 ] css 버튼 클릭시 눌리는 효과 만들기 (완전 쉬움)코딩의 즐거움/CSS 2020. 12. 28. 12:00
[ 코딩 ] css 버튼 클릭시 눌리는 효과 만들기 (완전 쉬움) 위 움짤 이미지처럼 클릭시 들어갔다 나왔다 하는 느낌으로 버튼을 만들어보려고 한다. 우선 전체 코드를 작성해보자. 위 코드를 작성하고 저장한 후 웹페이지를 열면 버튼이 움짤처럼 작동될 것이다. 작동이 안된다면 코드에 오타가 있는지 확인해 보자. 작성코드가 길어질 것 같아서 div#btn 태그 안에 글자는 적지 않았다. 우선 태그 안에 div 태그를 넣어줬고, 태그 안에 css 코드를 작성해서 div 태그를 디자인해줬다. 자 그럼 style 태그에 아이디선택자인 #btn에 적어 넣은 코드들을 살표보겠다. 아래 이미지를 확인하면서 읽어보면 이해가 더 쉽게 된다. float : left; 아래쪽에 margin-top이 적용이 안되서 플롯왼쪽으로..
-
[ 코딩 ] css 글자에 그림자 적용하기 : text-shadow코딩의 즐거움/CSS 2020. 12. 25. 12:00
[ 코딩 ] css 글자 그림자 속성 text-shadow text-shadow는 이름 그대로 글자에 그림자효과를 적용시켜준다. 속성을 적는 순서만 기억하면 쉽게 그림자를 넣을 수 있다. text-shadow 속성 적는 순서 x축 오른쪽과 왼쪽에 그림자 효과를 적용해준다. 오른쪽은 양수 ex) 3px ; 왼쪽은 음수 ex) -3px ; y축 아래쪽과 위쪽에 그림자 효과를 적용시켜준다. 아래쪽은 양수 ex) 3px; 위쪽은 음수 ex) -3px; blur 그림자에 번짐효과를 준다. 크기가 커질수록 더 흐릿하게 번짐효과가 적용된다. color 그림자에 색을 부여한다. 아래 예제를 통해서 어떻게 적용되는지 하나씩 알아보자. 우선 위와 같이 h1 태그에 너비(width)와 height(높이)를 주고 글자를 가운..
-
[ 코딩 ] css 그림자 속성 box-shadow코딩의 즐거움/CSS 2020. 12. 21. 12:00
[ 코딩 ] css 그림자 속성 box-shadow box-shadow는 말 그대로 그림자를 넣어주는 속성이다. 적는 순서만 잘 기억해두면 활용도가 높으니 익혀보자. box-shadow 속성 적는 방법 x축 오른쪽과 왼쪽에 그림자 효과가 적용된다. 양수일 경우 오른쪽 그림자 적용. 예) 5px ; 음수(-)일 경우 왼쪽 그림자 적용. 예) -5px ; y축 위쪽과 아래쪽에 그림자 효과가 적용된다. 양수일 경우 아래쪽 적용. 예) 5px ; 음수일 경우 위쪽 적용. 예) -5px ; blur 그림자에 번짐효과를 준다. 값이 작을수록 선명하게 보여진다. 값이 클수록 더욱 흐릿하게 보여진다. 예) 5px이 1px보다 더 흐릿하게 보여진다. spread 그림자의 크기를 조절해준다. 양수면 그림자의 크기를 확장시..
-
[ 코딩 ] css border-radius 테두리 둥굴게코딩의 즐거움/CSS 2020. 12. 18. 12:00
[ 코딩 ] css border-radius 테두리 둥글게 곡선 처리하기 border-radius는 이미지를 동그란 원으로 만들어 줄 때 테두리의 모서리를 곡선으로 만들어주고 싶을 때 사용한다. 원형으로 만들고 싶을때 border-radius : 50%; 네 모서리가 동일하기 때문에 50%로 값을 한번만 적어주면 원형이 만들어 진다. 이미지에도 border-radius 값을 주면 모서리가 둥글게 변한다. border-radius 전체 적는 순서 border-radius : 1 2 3 4; 전체 다른 값을 입력하고 싶다면 왼쪽위를 맨 처음으로 적어주고 왼쪽아래를 맨 마지막에 적어주면 된다. 위 이미지만 기억하면 암기하기 쉽다. 왼쪽위가 시작점이고 시계방향으로 적어주면 된다는 걸 기억하자. 연습 : 위쪽 모..
-
[ 코딩 ] css border 속성코딩의 즐거움/CSS 2020. 12. 14. 12:00
[ 코딩 ] css border 속성 border는 위 이미지에서 파란색 선처럼 테두리를 만들어준다. border는 안쪽 여백인 padding과 바깥쪽 여백인 margin 사이에 위치한다. 위 이미지를 예로 들어보면 가운데서 부터 글자 > padding(안쪽 여백) > border테두리) > margin(바깥쪽 여백) 위 순서를 기억해주면 된다. border를 적어줄 때는 보통 속성을 한꺼번에 적는 방법을 사용한다. border : width(너비) style(선종류) color(색) ; 이렇게 속성을 한꺼번에 적는 방법을 주로 사용한다. width(한칸 띄워쓰기)style(한칸 띄워쓰기)color(한칸 띄워쓰기) 스페이스바를 한번 눌러서 띄어쓴 다음 속성을 적어주면 된다. width는 주로 px을 많이..