soundcloud 웹사이트 작업 정리 -1 ​ javascript 수업을 앞두고 html css 강의가 끝나고 기존 웹사이트를 따라 만드는 작업을 했다. ​ 사이트 선정 후 UI 설계서를 작성하였다. 자바스크립로 구현 해야 할 부분도 매우 많겠지만... 우선 최대한 배운 선에서 조금이라도 비슷하게 흉내를 내겠다 라는 마음으로 작성했다. 해당 설계서는 아마 새로운 것들을 체득하고 나서 다시 작성하는 것이 좋을 것 같다. 코드리팩토링도 마찬가지로 .... ​ 처음은 사이트를 관리자도구로 한번 쓱 봐준 후 대략적으로, 시멘트 태그 구역을 나누어 주었다. 1부분은 header , 2는 nav , 3은 section, 4는 footer로 나누어 주었다. ​ ​ ​ 텍스트를 스크랩 해 html 부분 먼저 틀을 잡..

빨간색 : 문제설명 / 노란색: css코드 / 보라색: 코드로 인해 움직여질 문제 요소 앞서 소개드린 Flex 게임과 비슷한 느낌의 게임이다.. 물길을 당근에, 독물을 잡초에 뿌릴수 있게 코드를 입력해주면 된다. 문제 설명이 잘되어있어서 정답이 있다고 보고 풀면 된다. ​ Grid Garden A game for learning CSS grid layout cssgridgarden.com CSS grid 공부 게임 추천 Grid Garden 링크 ↑ Grid Garden 문제 정답 ​ 1번 (그리드에서 기준을 잘 생각하여 문제를 풀자.) grid-column-start: 3; ​ 2번 grid-column-start: 5; +다른 정답으로 grid-column-stard: -1; 도 가능하고 grid-c..

HTML 레이아웃 display 속성값 종류 : block, inline , inlin block position 종류 : static, relative, absolute 해더안에 네비가 있는 경우가 많다. + inline block 인라인이지만 블록같은(속성을 넣을수있다) ​ float과 clear(float 레이아웃 해제) + clear 전재조건(float가 있을때) ​ 그리드 시스템 종류 : 정적그리드시스템 , 동적그리드시스템, 반응형그리드시스템 ​ 반응형 그리드 클래스 종류 : 모바일 태블릿 노트북 데스크탑 . col-xs-* .col-sm-* .col-md-* .col-lg-* 디바이스의 해상도에 따라서 적절하게 대응하는 반응형 웹을 만들기 위하여 사용하는 viewport 모바일 브라우저들은 v..

CSS 그리드 grid ​ flex와 grid의 차이 Flex는 한 방향 레이아웃 시스템(1차원) Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원) 출처 : https://studiomeal.com/archives/533 Grid 레이아웃을 만들기 위한 기본적인 HTML 구조 Flex와 마찬가지로, 컨테이너와 아이템만 있으면 됌. A B C D E F G H I 부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고, 자식 요소인 div.item들을 Grid Item(그리드 아이템) ​ Flex와 마찬가지로, Grid는 컨테이너에 display: grid; 를 설정하는 것으로 시작. .container { display: grid; } 그리드 용어 정리 출..

속성효과 ​ 1. 불투명속성 마우스 올리면 선명하게 보이게 설정하기 마우스를 올리면 선명하게 보입니다. 구글웹사이트 : 가상클래스선택자는 어떤 상태를 지정한다. 이런상태는 태그,id,class처럼 html 문서상에 있는 것이 아니다. 가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 한다. ​ 텍스트상자안의 배경이미지를 반투명하게 처리하기 html5 웹프로그래밍 마우스를 올리면 힌트와 정답 보여주기 문제] css3에서 불투명도를 적용하기 위한 속성은? 1. border 2. opacity 3. transparency 4. visible 힌트] 불투명을 뜻하는 영문단어를 찾아보세요 정답] 정답은 2번입니다 2. 가시성속성 가시성 visibility : h..

입력양식태그 1.제출/초기화양식 제출양식 : submit get방식 : 빠르고 보안이 좋다 / post방식 : 보이는방식 ​ 초기화양식 : reset 입력데이터 초기화버튼 이름 : 학과 : 2.텍스트/비밀번호 입력양식 텍스트양식 : input type="text"안에 value= "" 비밀번호 입력양식 : password placeholder는 input text 박스에 글씨 떠있게 하는 태그 회원인증입력양식 Id : PW : 3.텍스트 공간 입력/필드셋 양식 텍스트 공간 입력양식 : textarea fieldset 태그: 입력폼이 여러개있을때 경계선 그려 그룹으로 만들때 사용 개인정보입력 이름: 학번: 4.라디오/체크박스/버튼 양식 라디오 입력양식 : radio 체크박스 양식: check box 버튼 ..

기본태그와 멀티미디어태그 ​ 1.특수문자태그 2. 태그 pre태그는 공백,특수문자,줄바꿈 등도 사용자가 입력한 그대로 화면표시 w32 standard w32 mission facts about w3c press and analysts ​ 3.책갈피태그 링크걸기, 클릭시 이동되는 장소 [이름] [주소] [전화번호] [참고] 정보영역 ...생략 정보영역 이름 [TOP] 정보영역 ...생략 정보영역 서울 강남구 신사동 291번지 [TOP] 정보영역 ...생략 정보영역 02-2322-0909 [TOP] 정보영역 ...생략 정보영역 ​ 4.이메일링크 받는사람 받는사람,제목 받는사람,참조,숨은참조 받는사람,참조,숨은참조,제목,본문 받는사람,본문문단 1.목록태그..

html과 css로 게시판 만들기3 게시판 게시글 1 입니다. 김준석│조회:15│2022-05-16(09:00) 게시판 3가지 만들기 끝났습니다! 게시판 3가지 만들기 끝났습니다! 게시판 3가지 만들기 끝났습니다! 게시판 3가지 만들기 끝났습니다! 게시판 3가지 만들기 끝났습니다! Flex응용해서 게시판덧글 만들기