Spell

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

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 안에 사용할 것이다. 첫번째 내용을 타이틀 아래에 추가해 줄 것이다. 추가로 아래에는 스타일을 하나 만들어주어 다음과 같이 입력하자. 로그인 페이지 아이디, 패스..

위의 이미지대로 한번 만들어 보자. 로그인 페이지 ID:

나는 구역을 나누죠 나는 문단이에요 목록1 목록2 목록3 목록1 목록2 목록3 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. 글씨 크기를 굵게 글씨에 밑줄을 span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: 하이퍼링크 img 태그입니다: input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요? 스파르타 코딩에서 수업자료로 받은 html 코드다. 여기서 첨가물을 조금 더하기는 했지만 별 차이 없긴하다. 해당 코드들을 웹 브라우저로 보게되면 아래의 그림과 같다. 하나씩 뜯어보도록 하자. 이 문서는 html 언어..

Html은 뼈대라고 보면 된다. 그리고 문서형태를 기반으로 한다. 태그들을 이용하여 문서를 작성하는데, 앞에 있는 태그를 '열리는 태그', 뒤에 있는 태그를 '닫히는 태그'라고 한다. '닫히는 태그'에서는 닫는 다는 의미로 앞에 '/'를 사용한다. Login Page title 태그 예시 약 150개 이상의 태그가 존재하는데, 우리는 검색을 통해서 1분이면 원하는 태그를 찾아낼 수 있다. 하지만 중요한 태그는 직접 알고 있어야 사용하기에 편하다. 이는 통계에 기반하여 확인할 수 있다. 해당 사이트에서는 전 세계의 수 많은 웹 페이지들이 몇 가지 종류의 태그로 이루어져 있는지 통계적으로 보여준다. 그리고 어떤 태그들이 몇 퍼센트의 빈도수로 사용하는지 확인 할 수 있다. 이후에는 어떤 태그들이 있고, 어떤 ..

Html(HyperText Markup Language) 가장 거대한 글이 웹 페이지이고, 웹 페이지를 만드는 언어중의 가장 기본이 되는 뼈대다. 웹 페이지가 중요한 이유중 하나는 바로 Public Domain이기 때문이다. 팀 버너스리는 웹을 어떠한 저작권도 존재하지 않는 완전한 자유를 의미하는 Public Domain을 선언했다. 많은 회사들이 각자 브라우저를 그래서 만들 수 있으며, 우리가 만든 웹페이지를 여러 브라우저로 똑같이 볼 수 있는 이유는 바로 이 때문이다. 브라우저의 역할은 무엇인가? 웹의 동작 개념은 어떻게 되는가? 누군가는 계속 뭘 달라하고, 누군가는 계속 무언가를 준다. 웹 서버의 한 디렉토리안에 index.html이라는 파일이 저장되어 있다. 그리고 이 웹 서버의 주소는 info...