웹개발 (14) 썸네일형 리스트형 [CSS] 플렉스박스 Flexbox 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. 플렉스모드를 사용하려면 플렉스 컨테이너부터 정의해야 한다. Flexbox parent element - Container 디스플레이 속성을 플랙스로 지정하면서 컨테이너는 flexible한 부모요소가 된다. .flex-container { display: flex; } flex-direction flex-direction 속성은 flex item들을 정렬하는 방법을 정의한다. .flex-container { display: flex; flex-direction: column; } column : flex item들을 행 기준으로 정렬한다. column-reverse : 행 기준 거꾸로 정렬한다. row : 열 기준으로 정렬.. [CSS] 미디어쿼리 Media Queries 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. css 중 반응형 웹페이지의 핵심이라고 할 수 있는것이 바로 미디어쿼리이다. 미디어 쿼리는 css3 부터 등장한 기술로 어떤 특정 조건이 충족되면 @media 규칙을 css 블록영역에서 적용시킨다. 조건식 @media (조건) { 적용할 css } @media only screen and (max-width: 600px) { body { background-color: lightblue; } } 윈도우 브라우저가 600px 이하일 경우에 배경색이 lightblue 색으로 변한다. 브레이크포인트 (Breakpoint) 우리가 웹페이지를 만들면 화면에 띄워질때 스마트폰이든 태블릿이든 그 화면 크기에 맞게 반응형으로 보여준다... [CSS] 그림자 text-shadow , box-shadow 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 재배포 수정하지 마세요. css로 문자나 박스의 그림자를 추가할 수 있다. 그림자를 추가할 때 쓰는 속성은 text-shadow와 box-shadow 두 가지이다. Text shadow text-shadow 속성으로 문자의 그림자를 추가 할 수 있다. 입력값으로는 수평값(px)과 수직 값(px)을 지정해주어야 한다. h1 { text-shadow: 2px 2px; } 또한, 색상도 지정 해 줄 수 있다. h1 { text-shadow: 2px 2px red; } 그림자의 크기와 색상 사이에 블러값도 넣어줄 수 있다. 블러값이 높아질수록 블러의 효과가 더 커진다. h1 { text-shadow: 2px 2px 5px red; } 그림자의 크기값을 .. [CSS] 그리드 - 자식 속성, 그리드 함수 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 그리드 속성 그리드는 컨테이너(Container)와 아이템(item)들로 나뉜다. 컨테이너는 부모 요소이며 그 안에 자식 요소인 아이템들을 배치 시킬 수 있다. 자식 속성 (Item) grid-row-start : 그리드 아이템 행의 시작 위치를 지정한다. (아래내용과 동일) grid-row-end : 그리드 아이템 행의 끝 위치를 지정한다. 단축속성 : grid-row ( grid-row: 1 / 2; ) 숫자를 지정하거나, 선 이름을 지정하거나 span 키워드를 사용한다. 그냥 span만 쓰면 기본값이 span1 grid-column-start : 그리드 아이템 열의 시작 위치를 지정한다. grid-column-end : 그리드 아이템 열의 .. [HTML] 주요 태그 정리 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 이전 글에서 설명한 태그들을 제외하고 html의 태그들 중 통계적으로 가장 많이 사용되는 태그들을 정리해보았다. 통계는 생활코딩 html 수업에 제시되어 있는 아래의 웹사이트를 참고하였다. https://www.advancedwebranking.com/html/ The average web page from top twenty Google results Apparently, an average web page uses twenty-eight different element types: The twenty-eight elements used on most pages, ordered by appearance frequency: www.advanced.. [HTML] 정보의 html, 의미론적인 태그 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 안녕하세요. 웹페이지를 공부하고 있는 초보 개발자입니다. : 글의 본문에 표현되진 않지만, 그 웹페이지 혹은 본문을 설명해주는 태그 charset : 캐릭터 셋의 약자로, 우리가 파일을 저장한 형식을 표시해주는 것으로 그 형식으로 화면에 표시할 수 있게 해 준다. ( 만약 'utf-8'의 형식으로 파일을 저장한다고 가정하면 저장하는 것을 인코딩, 그 저장한 형식으로 파일을 해석해서 읽는 것을 디코딩이라고 한다. ) name, content : 웹 페이지 상에서 표시되지는 않지만, 웹페이지에 대한 요약된 자료로도 이용가능하고, 검색될 때 그 요약자료로 쓰일 가능성이 높다. keywords : 웹페이지를 잘 설명하는 키워드들. 기계가 웹페이지를 분류.. [HTML] tag - form 공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다. 아이디: 비밀번호: 주소: : 사용자로부터 정보를 입력받은 정보를 서버로 넘겨줄 수 있게 하는 부모 태그, 입력받은 정보를 어디로 넘겨 줄 것 인지 경로를 설정할 수 있다. : 사용자로부터 정보를 입력받을 수 있게 하는 태그 : 사용자로부터 문자정보를 입력받을 수 있는 태그 : 사용자로부터 문자정보를 입력받되 비밀번호형식의 특수문자 ' ˙ ' 로 표시되어 몇글자인지 알 수 있지만 무슨 문자인지 알 수 없게 입력되는 태그 : 입력한 정보를 서비스로 넘어가서 서버로 전송 할 수 있게 해주는 버튼 태그 name : 각각의 컨트롤에 어떤 정보인지 이름을 부여할 수 있는 태그 속성 text: password: textarea: default value v.. <프로젝트 1> habit tracker 웹페이지 만들기 - 7. 완성 총 정리 - 스파르타코딩클럽 후기 1. 프로젝트 설명 마음은 있지만 행동하기 어려운 당신을 위한 나만의 Habit Tracker! 당신에게 맞춤으로 습관을 정하고 하루하루 이뤄나가는 나를 확인해보세요! 아주 작고 구체적인 습관부터 시작한다면 나중에는 더 큰 습관도 이뤄나갈 수 있을 거예요 ;);) - 개인의 습관을 내가 스스로 이룰 기간의 단위와 제목을 정해 등록할 수 있게 만드는 habit tracker 2 . 동영상 & 사이트 이동 http://3.34.99.30/ 3. 구현 기능 login 페이지 - 회원가입 기능 : 아이디와 비밀번호를 db에 저장 - 로그인 기능 : 아이디와 비밀번호 세트를 db에서 존재 여부 확인 후 아이디를 세션에 저장 후 사이트의 메인으로 입장 main 페이지 - 각 페이지들로 이동하게 해주는 연결페이지 -.. 이전 1 2 다음