CSS9

• 

  [CSS] 그리드 Grid를 익혀보자 (일단 기초편 #1) 제가 최근에 사용했던 CSS 레이아웃 스킬은 조금은 챙피하지만 display: flex; 이게 전부였습니다. 하지만 최근 Grid로 간단하게 레이아웃을 짤 수 있고, 이 방법이 유용하다는 것을 배우면서 확실히 쉽고 직관적으로 할 수 있다고 생각하여 최근에는 자주 애용하고 있습니다. ※ CSS grid는 IE, 즉 인터넷 익스플로러에서는 지원하지 않습니다. IE를 대응을 해야되는 분들에게는 display:grid가 아닌 다른 방법으로 레이아웃을 짜는 것을 권장드립니다. 1. HTML 코드 일단 그리드를 그릴 수 있는 HTML 코드를 작성합니다. 2. CSS 코드 .grid-container{ display:grid; grid-template-columns: 100px 100px 100px; grid-tem.. CSS 2022. 11. 7.

• 

  [CSS] 배경이미지를 넣어보자! background 추가 속성들! 기존에 img 태그를 통해서 이미지를 삽입하는 방법도 있지만, HTML 요소 뒤에 배경 이미지를 넣는 방법이 있습니다. 바로 CSS의 background-image 속성입니다. 전체 페이지부터 부분적으로 배경이미지를 설정할 수 있습니다. 1. background-image .box1 { background-image: url("이미지 경로") } background-image 속성에 url (" ") 괄호 안에 경로를 넣으면 배경 이미지가 삽입됩니다. 이미지 경로만 넣어둔다면 딱 맞는 사이즈라면 모르겠지만, 사이즈가 다른 이미지라면 바둑판 모양처럼 반복이 됩니다. background-repeat의 repeat는 기본값입니다. 반복이 되지 않으려면 아래의 코드와 같이 기재를 하면 됩니다. 2. backgr.. CSS 2021. 12. 28.

• 

  [CSS] box-sizing, 테두리까지 포함 시키는 방법! 여러 요소를 배치하려면 각 요소들의 너비 값을 기준으로 해야합니다. width, height 속성 값이 컨텐츠 영역의 너비와 높이만 나타내게 되는데, 여기에서 padding이나 border를 설정했다면 설정된 값만큼 빼서 width와 height를 계산해야합니다. 이렇게 매번 계산하게 되면, 너무 비효율적입니다. 이러한 방법을 CSS 속성인 box-sizing을 이용하면 padding과 border값을 포함시켜서 사용할 수 있게 설정이 가능합니다. .box1{width:300px;height:300px;padding:20px;border:5px solid #ccc;} .box2{width:300px;height:300px;padding:20px;border:5px solid #ccc; box-sizing.. CSS 2021. 12. 27.

• 

  [CSS] box-shadow, 그림자를 넣어보자! box-shadow는 그림자 속성입니다. 이미지부터 감싸는 div 등 전체를 지정하는 것에 따라 넣을 수 있습니다. box-shadow의 속성 값에 따라 그림자의 위치부터 흐림, 번짐, 심지어 색상까지 조절할 수 있습니다. box-shadow를 사용하면 수평, 수직 거리는 필수적으로 지정을 해야하고, 나머지 값들은 옵션으로 설정이 가능합니다. (기본값은 none 입니다.) .box1{ box-shadow: 10px 10px 5px red; } 앞에서 부터 수평, 수직, 번짐, 그림자 색상으로 속성을 기재하였습니다. - 수평 거리: 양수로 설정하면 오른쪽, 음수로 설정하면 왼쪽 이동 - 수직 거리: 양수로 설정하면 아래로, 음수로 설정하면 위로 이동 - 흐림: 양수 값으로 설정하면 점점 흐려집니다. 기본값.. CSS 2021. 12. 26.

• 

  [CSS] 모서리를 둥글게! border-radius 일반적으로 box-model을 만들고, 테두리 값을 넣게 되면 딱딱하게 라인이 생기게 됩니다. 조금 더 부드럽고, 둥글게 할 수 있는 border-radius 입니다. 간단하면서도 정말 많이 사용되고 있는 CSS입니다. border-radius는 CSS3 에서 정의되었고, IE9 부터 지원하게 됩니다. border-radius의 값을 설정하는 방법은 아래와 같습니다. border-radius: 10px 20px 10px 10px; 위의 값은 네 방향을 설정하게 됩니다. 제일 좌측에 있는 코드로부터 좌측 위 / 우측 위 / 우측 아래 / 좌측 아래 이렇게 설정이 됩니다. 좌측 위: 10px 우측 위: 20px 우측 아래: 10px 좌측 아래: 10px 이런식으로 설정이 가능하기 때문에 개별적으로 값을 줄 .. CSS 2021. 12. 23.

• 

  [웹 퍼블리셔 189일차] 결함과의 싸움! 정말 오랜만에 글을 쓰게 되었습니다. 거의 두 달 만에 글을 쓰게 되면서 그간 있었던 것 중에 가장 많이 했던 제 실수부터 잘 놓치는 부분을 크게 3개를 써봤습니다. 계속해서 프로젝트를 진행할 때 참고하고, 또 참고하고 신경쓰기 위해서 작성 하였습니다. 1. 크로스브라우징에 신경쓰자 제가 가지고 있는 휴대폰은 갤럭시노트10으로 디바이스 화면도 크다고 생각하지 못했습니다. 제가 생각했던 크로스 브라우징이라는 것은 크롬, 사파리, IE 환경에서 레이아웃이 달라지지 않아야 한다는 것! 바로 그 뿐이라고 생각했습니다. 하지만, 어플리케이션에서 브라우저 환경을 보는 것이 아닌, 디바이스별로 화면에서 레이아웃이 깨지는지 확인하는지 이번 프로젝트를 통해서 알게 되었습니다. 참 다양한 환경에서 레이아웃이 틀어지는 부분.. 웹 퍼블리셔 일기 2021. 10. 10.

• 

  [CSS] 삼각형을 조금 더 쉽게, 만들어보자! (css 트라이앵글 제네레이터) 웹 사이트를 보다보면 셀렉트박스나 콤보 박스 등에서 ▲ 이런 모양의 삼각형이 가끔 나오는데, 이미지 파일로도 쉽게 가능하지만, CSS로도 충분히 표현이 가능한데 이번에 소개하려고 하는 사이트는 삼각형 모양을 쉽게 만들 수 있는 제네레이터 사이트입니다. Direction은 삼각형의 방향입니다. Top으로 하면 ▲ 이런 모양으로 나오게 되고, Top 방향부터 총 8방향으로 설정이 가능합니다. Type에서 Equilateral(정삼각형), Isosceles(이등변), Scalene(부등변 삼각형)을 선택할 수 있습니다. 이 타입을 선택할 때 사이즈를 조절하는 기능이 활성화가 되기 때문에 필요한 타입으로 선택을 해서 커스터마이징을 하면 됩니다. Color에서 색상을 선택하는데, RGB, HSB도 지원합니다. 다.. CSS 2021. 7. 20.

• 

  [웹 퍼블리셔 104일차] 여전히 어렵고, 어렵고, 어렵다 무더운 여름이 왔지만, 그런 것을 느끼지 못할 정도로 엄청나게 바쁘게 100일하고도 4일이 더 지났습니다. 이 중간에 자바스크립트 책도 구매하고, 공부를 정말 나노(?)만큼 공부를 하고 있지만 티끌모아 태산이라고 생각하면서 꾸준하게 공부하고 있습니다. 여전히 jQuery를 사용하는 프로젝트도 있고, Vue.js를 사용하는 프로젝트도 앞으로 잡혀있기 때문에 공부를 게을리 할 수 없게 되었습니다. (React 겁나 공부했는...) 현재는 금융권 프로젝트를 진행하고 있는데, 이전에 했던 하드코딩이 아닌 프레임워크를 이용한 페이지 작업을 하고 있습니다. 금융권 프로젝트에서 제일 어렵고, 어렵고, 어려운점은 바로 외부망이 접속이 되지 않는 부분이었습니다. 당연히 금융권 프로젝트를 진행하게 되면 민감한 정보들이 노.. 웹 퍼블리셔 일기 2021. 7. 17.

• 

  [CSS] 여전히 헷갈린 Float 해제 방법을 정리! 요즘에는 레이아웃을 잡는 방법이 display: flex를 이용하여 다양한 방법으로 하지만, 그래도 아직까지는 IE를 대응해야하기 때문에 float을 사용하는 방법을 그래도 알고 있어야 합니다. (뼈저리게 느끼고 있습...) 일단 float을 사용해서 레이아웃을 잡는 경우는 바로 가로로 배치하려고 하는 부분에서 사용이 됩니다. 하지만 float을 많이 사용하지 않는 이유는 해제하는 방법이 까다로워서 그런 것이 아닐까? 그리고 flex나 다른 방법으로 가로 배치하는 방법도 많은데 궂이? 라고 생각하시겠지만 꼭! 알아두시는 것이 좋습니다. left 요소를 왼쪽에 배치 right 요소를 오른쪽에 배치 ※ HTML 코드 안녕하세요 저는 Lorem ipsum dolor, sit amet consectetur ad.. CSS 2021. 6. 28.