예제가 계속 나옵니다. 모르는 코딩에 익숙해져야 하기 때문에 어쩔 수 없이 계속 풀어보면서 익숙해지는 방법을 사용하는 것 같습니다. 이번 예제는 부트스트랩을 사용하여 '위 웹페이지 제목' 와 '아래 카드 4개' 사이 가운데 포스팅 박스를 만들어보는 것입니다. > 가운데 큰 박스는 별도의 를 다시 만들어서 생성하고 이름을 'mypost'로 지정해 줍니다. 이 때, 박스 크기나 위치를 확인하기 위해서, background-color를 사용해주시면 좋습니다. > 박스 테두리에 box-shadow 명령을 활용해 그림자 효과를 줘서, 박스 테두리가 보이도록 하고, 안에 들어갈 내용들의 간격도 padding을 활용해 미리 조절해 놓습니다. 그림자 효과: box-shadow 0px 0px 3px 0px gray; 안..

자 또 다른 예제의 등장입니다. 점점 예제 수준이 올라가고 있습니다. 부트스트랩을 사용해서 아래와 같은 웹페이지를 만드는 것이 목표입니다. > 우선 지난 시간(1주차 7번째 시간)에 만들어놓은 코딩을 그대로 사용합니다. 기억이 안나면 다시 돌아가서 한번 복습합니다. https://finestreet-greenzone.tistory.com/62 [스파르타코딩클럽] 1주차 7번째 - 부트스트랩(예쁜 CSS 모음집) > 그렇게 말하는 부트스트랩이란 뭔가요? bootstrap(부트스트랩)이란, 예쁜 CSS 모음집이다 라고 생각하시면 됩니다. 즉, 부트스트랩은 이미 누군가가 예쁘게 디자인해서 만들어 놓은 웹 개발용 객 finestreet-greenzone.tistory.com > 부트스트랩에서 아래와 같이 .ro..

> 그렇게 말하는 부트스트랩이란 뭔가요? bootstrap(부트스트랩)이란, 예쁜 CSS 모음집이다 라고 생각하시면 됩니다. 즉, 부트스트랩은 이미 누군가가 예쁘게 디자인해서 만들어 놓은 웹 개발용 객체들을 모아둔 곳이라고 보시면 됩니다. 무료로 제공되므로, 아래의 링크를 클릭해서 들어가서 한번 구경해 보시는 것도 좋습니다. https://getbootstrap.com/docs/5.0/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com 어떤가요? 굉장..

앞서 만들어 본 로그인 페이지가 지금 웹페이지의 왼쪽으로 치우쳐져 있잖아요~ 이걸 가운데로 가져와보는 예제입니다. 객체의 양쪽 여백을 동일하게 만든다는 것으로 이해하면 된다고 합니다. 를 사용해서 가운데로 가져오고 싶은 객체들을 다시 묶습니다. 그리고, class를 활용해서 다시 새롭게 설정한 에 이름표를 붙여줍니다. 꽉 차있는 객체는 먼저 가로 길이를 width로 줘서 공간을 만든다. margin: auto를 사용해서 상하좌우 여백을 맞춘다. 휴, 짧은 시간 안에 정말 많은 걸 배운 느낌입니다. 아...근데 아직 1주차의 절반도 못 왔..... 붓을 쥘 줄 아는 것과, 예쁘게 그림을 그릴 줄 아는 건 다른 이야기다. by 이범규 튜터 허허헣허헣헣 뼈때리는 소리네요. 그렇긴하죠. 예술적 감각이 있어야 예..

CSS를 활용하여 로그인 페이지 만들어보기의 예제가 제공되었습니다. 본격적으로 더 다양한 태그들을 활용하여 웹페이지를 꾸며보는 시간~ 대상은 바로 아래, (This is) 스파르타! (1) '박스'란 무엇이냐. = 태그다. 즉, 묶어두고 싶은 객체들이 있으면 태그를 활용해서 묶어라. (2) 적극적으로 객체에 이름 붙여주기 활용 class = "mytitle" 과 .mytitle (3) 에 사용되는 다양한 태그들 background-color: 배경색 조정, 세미콜론(;) 써야함 width: 너비 조절, 픽셀로 함, 세미콜론(;) 써야함 height: 높이 조절, 픽셀로 함, 세미콜론(;) 써야함 text-align: 텍스트 정렬, 세미콜론(;) 써야함 background-image: 배경그림 제어, ur..

글자 색깔 변경과 같이, 웹페이지를 꾸미고 싶으면 CSS 를 알아야 한다고 합니다. 근데, CSS를 하기 위해서는, (꾸미고자 하는 객체에) 이름표를 붙이고, 그 이름표를 불러서 어떻게 하라고 명령하면 된다. 그게 CSS 다. 라고 합니다. (객체라고 표현하는게 맞는지는 모르겠습니다. 이름붙일 때 그냥 class라고 하길래 객체라고 불러봤습니다.) "짱구의 바지 색깔을 바꿔줘!" 여기서 '짱구'는 웹페이지의 특정 객체, '바지 색깔을 OO으로 바꿔줘'는 그 객체를 꾸미는 명령이라고 보면 되겠네요. 결국 '짱구'가 될 객체를 정해서 그 객체에 '짱구' 라고 이름을 붙여주고, '바지 색깔을 빨간색으로 바꿔줘' 라고 하면, 그 객체 색깔이 바뀐다는 이야기. 여기서의 핵심은 바로 태그를 활용하는 것! 이 태그는..