tp134679 님의 블로그

1. input 의 속성과 타입2. 다양한 명령어를 사용하여 input을 꾸며보기   1. input 의 속성과 타입1-1 input 의 속성input은 입력하다,넣는다 라는 뜻으로 기본적으로는 text 형태를 가지나  사용하여 여러 형태의 요소를 넣을 수 있다. input 을 사용하여 넣을 수 있는 요소들을 몇가지 정리해 보자면button: 누를수 있는 버튼을 생성합니다.checkbox: 체크표시가 가능한 박스를 생성합니다.text: 텍스트를 입력가능한 영역을 생성합니다. radio: 같은 name 의 그룹에 묶인 속성들중 하나를 선택 할 수 있는 버튼을 생성합니다. 수업시간에 사용한 input 은 이정도지만 image: 이미지를 보여주는 제출버튼을 생성number: 숫자를 입력하는 영억을 생성ran..

1. 자바스크립트의 역사 var , let , cons2.자바스크립트 데이터 타입3. 자바스크립트의 연산자4. if 와 for5. for 을 사용한 구구단 표 만들어보기   1. 자바스크립트의 역사 var , let , cons1.1 자바스크립트의 역사자바스크립트는 netscape 가 10일만에 개발한 새로운 언어로서  라이브 스크립트 > 모카스크립트 > 자바스크립트로 이름을 바꾸면서 꾸준한 업데이트를 통하여 많은 부가설정이 사용자에 입맛에 맞게 진화 하였습니다. 그만큼 대중성이 많고 편리해진 ㄴ최근까지도 자주 사용하는언어입니다.  console. log 자바스크립트에서 사용된 변수값을 눈으로 확인할 수 있게 나타냄   1.2 var let cons 자바스크립트의 기본 명령어 이자 변수를 설정해주는 명령..

1. 가상요소란2. 가상요소와 다른 이미지 넣는 방식을 복습해보자.     1. 가상요소가상요소는 가상의 요소 즉 html 문서상에서는 보이지 않는 요소를 추가하는 것을 말합니다. 사용하는법은 가상요소를 사용하고자 하는 요소 뒤에 (::)을 사용하여 가상요소를 사용하겠다 라고 명령합니다.단 요소를 꾸미기 위한요소이므로 style 시트를 사용하거나 외부 css파일을 연결해야 하며 content:" "을 반드시 사용해야합니다. >> "content를 사용하겠다 선언" 가상요소의 종류는 ::before: 요소의 앞쪽에 새 가상의 요소를 추가합니다.::after: 요소의 뒤쪽에 새 가상의 요소를 추가합니다.많이쓰이고 새 요소를 추가하는건 이 두가지 뿐입니다. ::marker: 목록 요소 앞에 마크를 선택합니다...

2주동안 배운 HTML과 CSS를 사용해 2인1조로 그룹을 지어서 페어 코딩을 진행하였다.해당 웹페이지를 만드는 내용이였는데. 그동안 배워오면서 영역잡는것이 가장 중요하다고 배웠기에 영역을 잘 파악하는것이 중요 했다. 눈대중으로 대강 파악한 영역은큰 영역안에 6개의 영역으로 나뉘어 지는것을 파악하고 HTML 구조를 잡았다.해당 이미지 처럼 container 이라는 큰 영역 안에  header 최상단 파란색 선 영역main_banner 빨간색 선 영역search 갈색선 영역ad 녹색선 영역footer 노란색선 영역sidebar 청녹색선 영역나누어서 디자인을 하였다 또한 강조해주신게 협업을 할때 모르는사람이 보거나 다른사람에게도 이해가 가능할만한 영역의 이름을 잡아야 함으로 영역과 세부 영역의 이름을 구체적..

1. position 속성의 종류  css의flex 에 이어서 추가로 레이아웃을 원하는곳에 배치하기 쉽게 만들어주는  position 을 배우게 되었다.   1. position 속성의 종류 position은 CSS의 속성중하나로 레이아웃을 배치하거나 아이템을 이동시킬때 사용한다. 4면 (상하좌우)를 기준으로 아이템을 이동시킬 수 있으며 +값 뿐만아니라 - 값도 사용가능하다다만 방향값이 +일때 명령한 방향으로 이동하는게 아니라 반대쪽방향으로 이동하게된다. position:static static은 따로 속성을 부여하지 않아도 상시로 적용되고있는 설정이 불가능한 기본값이다. 1. position:relative relative은 기존의 위치부터 계산되는 속성이다 즉 static(기본값)과 시작이 같으며 4..

1. FLEX의 속성,형태와 주축과 교차축 의 이해2. flex를 활용한 과제풀어보기 저번시간에 다음속성을 예측하기 힘들기에 사용하지 않는float 대신에 원하는 위치에 디자인 하기위한 새로운 속성인 flex를 배우게 되었다.  1. FLEX의 속성,형태와 주축과 교차축 의 이해flex를 이해하기 위해선 주축과 교차축의 개념을 이해하면 쉬운데 flex의 기본속성값은  row(가로)로 정렬해주는 display:inline-block 와같이 블럭을 가로로 정렬해주는 효과를 가지고 있습니다. 또한 부모가 충분한 크기를 가지고 있어햐 하며 column(세로)축을 기준으로 명령어를 줄 수 있으며 가로와 세로축을 활용하여 아이템들을 원하는곳에 배치할 수 있습니다.   1. flex의 기본명령어의 기본 flex 명령..

1. float 의 배경과 특징  2. float 의 문제점  오늘은 CSS에 있는 Float를 배우고 활용하였다.   1.float 의 속성과 특징 float의 속성과 특징은 넓이와 높이를 설정가능한 블록상태를 가지는 속성이며 life, right를 이용하여 영역의 좌우 영역에 표현이 가능합니다.float 말그대로 띄다 라는 표현을 가지고 있는데 float 속성을 사용하면 해당 이미지와 같이 띄어진 형태를 띄어서 사용자에게 보여지게 된다.  해당이미지처럼 123에 float 속성을주고 4번 은 좀더 큰 박스를 만들고 결과값을 확인해보면 오른쪽 이미지처럼 1,2,3 번 박스 밑에 4번 박스가 위치 하는것을 알 수 있다.또한 최소한의 너비와 높이 값을 유지하려고 하는 인라인형태와 달리 float를 사용하면..

1. CSS padding,magin의 구분과 활용법2. padding과 magin을 사용하여 컨텐츠를 꾸미고 알아보기  전시간에 배운 padding과 magin을 보강하면서 복습하는 시간을 가졌다.  1. CSS padding,magin의 구분과 활용  1. padding 패딩을 사용하여 밀어낸 영역은 병합현상이 일어나지 않으며, 콘텐츠의 연장선으로서 패딩을 사용하여 넓어진 영역 또한 색이 입히고  추가속성 또한 모두 상호작용이 가능하다.해당 HTML CSS코드를 사용하여 알아보도록 하자  해당 블록형태의 box1과 box2 가 붙어있는 것 처럼 보이지만 box1과 box2의 콘텐츠의 연장선인 padding영역이 box1,box2각각 상하 20px 넓어져서 aqua색의 속성 또한 넓어졌고 병합현상이 일..

1. margin과 padding2. margin과 padding을 활용한 원하는 공간 디자인    1.margin과 padding  기본적으로 HTML은 4가지의 영역으로 구성된다고 볼 수 있다. 바깥쪽부터 margin,border,padding,content 4가지의 영역으로 나뉘게 되는데 margin과 padding은 구역을 나눈다는 역할은 비슷해보이나 각자 다른 사용도를 보인다.margin과padding 둘다 4면을 가지고 영역을 활용하기 때문에  상하좌우로 나누어 명령어를 내릴 수 있다.padding을 예로 들자면 padding: 20px 명령어를 활용하면 4가지 면(상하좌우) 모두에 20px만큼의 공간을 벌리나 아레의 명령어처럼 구역을 나눠서 명령어를 넣는것도 가능하다.  1.2 margin과..

1. CSS의 선택자 2. 선택자를 활용하여 원하는 블럭에 적용하기  1. CSS의 선택자 종류와 활용CSS는 스타일 시트로써 원하는 라인과 위치에 스타일을 적용시킬만한 선택자를 사용하는데 배운 선택자를 살펴보자면1. class 선택자class사용한 값 을 선택하여 속성과 속성값을 적용함 { (.) 을 이용하여2. id 선택자id를사용한 값 을 선택하여 속성과 속성값을 적용함{ (#) 을 이용하여 id를 사용함}3.태그 선택자명령어를 직접 태그하여 속성값을 적용함 (웬만하면 태그 선택자는 자제하는게 좋다 >>선택한 태그에 모든 속성값이 부여되기 때문에 혼선을 만듬) 4. 그룹 선택자공용속성 (class,id등)를 이용한 한 그룹을 묶어서 속성값을 적용함 5. 직계 자식 선택자선택한 요소의 직계 "모든"자..