하루 하루 HTML,CSS학습과정 중에 배운것들을  정리하려면 글로 표현하는데는 한계가 있었다.그래서 방법을 찾던 중 코드펜을 발견했고, 코드를 작성해서 티스토리에 연동만 하면 코드뿐 아니라 출력결과도 보이는 유용한 방법이었다. 오늘 부터 코드펜을 이용해서 학습내용을 정리를 해야 겠다. 먼저 코드펜을 적용해서 글쓰기 전 코드펜 이용방법과 티스토리에 연동하기까지의 과정을 간단히 남겨보려 한다. + 코드펜 티스토리에 연동하는 방법 1. https://codepen.io/    코드펜에 접속하기 CodePenAn online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaS..

오늘 정리할 내용은 계속 미뤄뒀지만, 한번은 꼭 정리할 필요가 있는  flex box에 대해 정리해 보려한다.Flex box플렉스 박스는 공간을 분배하는 방법,콘텐츠를 정렬하는 방법,요소의 순서를 정의해서 페이지 구성 요소의 레이아웃을 정하는 단순하면서도 강력한 방법이다. 콘텐츠를 가로나 세로 방향으로 정렬하는 일,축 하나를 따라 나열하는 일,여러 줄로 나누는 일 등을 쉽게 할 수 있습니다. 플렉스박스 레이아웃에 가장 중요한 점은 요소들이 스크린 크기나 기기종류에 구애 받지 않고 예측가능하게 동작한다는 점입니다.플렉스박스는 공간이 늘어나거나 줄어들 때 콘텐츠 크기도 그에 따라 커지거나 작아질 수 있으므로 반응형 사이트에 잘 어울립니다.

구글폰트 사용하는 방법이 조금 달라져 새로워진 방법에 대해 공유해 보려 한다. + 구글 폰트 사용법 1. https://fonts.google.com/?subset=korean&script=Kore  구글폰트 검색 후 접속한다.  2. 원하는 폰트를 클릭하다.  3. 오른쪽 상단 Get font를 클릭한다.  4. 오른쪽편에 보이는 Get embed code버튼을 클릭한다.  5. Copy code를 클릭하여 전체코드를 복사 후 에디터(비주얼 스튜디오)로 돌아와 태그에 넣어준다.   6. 폰트 스타일을 복사한 후 CSS style sheet에 적용 시킨다. 구글폰트를 이용하여 더욱 풍성한 웹페이지를 꾸며보자.

오늘은 버튼 태그를 만들어서 버튼속에 아이콘을 삽입하는 방법에 대해 공유해 보려 한다. +아이콘 넣는 순서  1.  https://boxicons.com/  BOXICONS사이트에 접속하기  2.  사이트 오른쪽 상단 Usage 클릭  3.  스크롤을 내려 아래쪽으로가서  Import the CSS 밑에 link 복사      전체 복사 후  복사한 링크를 태그 안에 넣기     +아래 그림 참조  4.  다시 메인 화면으로 돌아와서 원하는 아이콘을 검색한다 ex)  user를 검색  > 검색 후 하단 Font 클릭 > 클릭시 바로 복사됨  5. 복사한 icon 폰트 태그 안에 넣기ex)  6. 마지막으로 여러가지 스타일을 적용하여 아이콘을 넣은 멋진 버튼 완성하기

오늘은 팀프로젝트를 준비하던 중 placeholder에 대해 배운 새로운 사실들을 간단히 기록으로 남기려 한다.게시판 글쓰기 페이지에서 Texteditor를 만들 던 중  Texteditor에서는 글자입력란을 textarea를 이용해서 만들지 않고 div태그로 만든다는 사실을 알았다.+ 아래 사진은 내가 만든 texteditor이다.보통 우리는 글을 입력하는 란을 만들때 input or textarea태그를 적용한다. 그러나 div를 이용해서도 텍스트 입력란을만들 수 있다. 바로 div에 contenteditable속성으로 만드는 것인데,여기서 내가 직면한 문제점이 글자 입력란에  placeholder속성을 사용해 "내용을 입력해 주세요"라는 문구를 넣고 싶은데 placeholder는 input이나 te..

오늘은 공간 분할 태그인 div와 span의 차이,시맨틱 태그에 대해 알아볼 예정이다. div와 span 차이는? div태그는 페이지를 논리적인 구역으로 분리하는데 사용되며, 블록 요소이다. HTML요소들을 묶는 컨테이너로 사용된다.div자체적으로 특별한 의미는 없으며, 블록요소이기 때문에 하나의 줄을 전부 차지 한다.span태그는 인라인 요소로 텍스트를 위한 컨테이너로 사용할 수 있다. 인라인 요소는 콘텐츠의 크기만 공간을 차지하는 요소이다. span태그도 특별한 의미는 없으며 CSS와 함께 사용되어 텍스트 일부의 스타일 속성을 설정할 때 사용된다.시맨틱 태그란 ?semantic의 사전적 의미는 의미론적인으로 의미가 있는 태그이다.시맨틱 태그 이점• 검색엔진 최적화 - 검색했을 때 내가 만든 웹페이지가..