Spell

아이템은 아무거나 선정해서 만들어 볼 것이다. 사전에 준비된 Bootstrap시작 템플릿을 가지고 만들어 볼 것이다. (feat. 기획서 레이아웃) 이 과정에서 내가 행동했던 (멍청한것 포함) 기록을 남겨본다.. 흑.. 시작 템플릿과 기획서 레이아웃은 다음과 같다. 시작해보죠! 일단.. 안에 기획서와 비슷하게 텍스트들을 넣고 구역을 나눠보자. Spell's Shopping 상품제목 해당 제품은 어쩌구저쩌구 내용 주문하기 주석 처리로 해당 구역이 어떤 구역인지 헷갈리지 않게 적어두었다. (내가 작업하기 편하려고) 이제 상품 이미지를 찾아서 일단 꾸며볼꺼고, 상세내용을 좀 더 수정해줄꺼다. 추가로 글꼴을 입혓으며, 전체를 하나의 구역으로 묶어 가운데로 읻동시켜주었다. 중간중간 글씨크기를 수정해주기 위해 cl..

이번에는 다음 화면처럼 posting box를 만들어서 넣어줄꺼다. 저 가운데 있는 box를 추가할꺼다. 일단 내가 작업해둔 코드와 페이지부터 보자. 나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다 포스팅 하기 여기에 기사 제목 기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약 코멘트 란 여기에 기사 제목 기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약 코멘트 란 여기에 기사 제목 기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블라블라 강약약중간약약강약중간약중간중간약약 코멘트 란 여기에 기사 제목 기사의 요약 내용이 들어감. 가나다라마바사 어쩌구저쩌구 블라블..

전에 만든 페이지를.. 이제 좀 더 추가작업을 할 것이다. 예시 화면은 다음과 같고 현재 내 코드를 보자. Hello, world! This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. It uses utility classes for typography and spacing to space content out within the larger container. Learn more Card title that wraps to a new line This is a longer card with supporting text below ..

배운걸 바로 사용해서 활용해봐야겠지? https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/web101/week01/06.+%EB%82%98%ED%99%80%EB%A1%9C%EB%A9%94%EB%AA%A8%EC%9E%A5%EB%BC%88%EB%8C%80.html 해당 링크로 들어가면 이런 화면이 나온다. 이걸 참고로 따라해서 꾸며 볼 예정이다. 가장 상단에 Hello, world!라고 적혀있는 구역을 Jumbotron 이라고 한다. bootstrap에서 Jumbotron을 들어가 볼까? (https://getbootstrap.com/docs/4.0/components/jumbotron/) 와우! 아주 그대로 있꾸만! 크크크 밑에 있는..

Bootstrap이 뭔데? 괜찮은 CSS를 미리 모아둔 것이라고 생각하면 된다. 마치 컨닝하는 기분이겠다. (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 Bootstrap을 가져다 쓰는 경우가 많다고 한다. 그래.. 나의 미적감각이 어느정도 인지 모르잖아?) 누군가 미리 작성한 CSS를 내가 작성한 Html파일에 적용시킨다? 전에 나는 html과 CSS의 파일 분리를 배웠다. Bootstrap의 적용은 CSS파일 분리와 원리가 똑같다고 생각하면 된다. 그저 CSS의 파일이 인터넷 어딘가에 있다는 점이 다르다. 새로운 것을 해볼테니 새로운 html작성을 해보자. 이름은 index.html로 지정했다. 내용을 다 지우고 실습용 코드를..

폰트 활용 실습용으로 폰트 주소가 필요하다. 해당 사이트에서 원하는 폰트를 정한 뒤, 클릭하면 [Select this style+]라는 버튼을 클릭해서 링크를 얻어두자. https://fonts.google.com/?subset=korean 그럼 이런 창이 뜨는데, 위의 링크란을 복사 하자. 이후 밑에 CSS rules to specify families란도 복사해두자. 사용 할 내용은 다음과 같다. font-family: 'East Sea Dokdo', cursive; 첫번짼 안에 넣어 줄 것이고, 두번짼 CSS rule이기 때문에 style 안에 사용할 것이다. 첫번째 내용을 타이틀 아래에 추가해 줄 것이다. 추가로 아래에는 스타일을 하나 만들어주어 다음과 같이 입력하자. 로그인 페이지 아이디, 패스..

로그인하기 아래는 몇가지의 css 코드다. 배경관련 background-color background-image background-size background-position 사이즈 Width Height 폰트 font-size font-weight font-famliy text-align color 간격 border-radius margin padding 본격적으로 활요을 해보자. 사용했던 코드에 일단 구역을 나누는게 좋다. 그 구역만 따로 꾸며야 하니까. 그래야 구별이 가능하니까. 전에 사용했던 로그인 페이지의 코드를 활용할 것이다. 로그인 페이지 아이디, 패스워드를 입력해주세요 ID: PW: 로그인하기 로그인 페이지라는 곳에 텍스를 조금 더 추가하고 mytitle이라는 명찰을 첫번째 안에 넣었다...

안에 로 공간을 민들어 작성한다. mytitle이라는 클래스를 작성할때, .mytitle {...} 라고 써줘야 하는 것을 절대 잊으면 안된다. (앞에 있는 .을 빼먹으면 큰일이다) 이게 무슨소리냐? 실습해보면서 익혀가보자. 로그인 페이지 ID: PW: 로그인하기 코드와 그로 인해 나온 페이지이다. 위의 코드를 보면 안에 아래와 같은 코드가 들어있다. 스타일을 만드는데, mytitle이라는 이름이고 color가 red가 된다. (red의 끝에는 항상 세미콜론(;)을 붙여줘야 한다, 추가로 중괄호 안에 내용이 있어야 하고) 그리고 코드를 살펴보자. 로그인 페이지 안에 class="mytitle"이라는 문구가 들어있다. 그러면 에는 mytitle을 적용하라는 의미이다. (간단히 '명찰을 달아준다'라는 식으로..