분류 전체보기 (150) 썸네일형 리스트형 [css] flex 사용법 ① (flex-direction, flex-wrap, justify-content,align-items,align-content) flexbox 또는 flex 컨테이너와 그 내부에 들어 있는 아이템들을 효율적으로 배치하고 공간 활용이 자유로우며, 레이아웃을 편리하게 구성 할 수 있는 개꿀팁이다 하지만 IE버전에 따라 지원 안하는게 있으니 우리모두 익스플로어 지양 운동을 하자 위와 같이 컨테이너 안에 item이 배치 되어 있어야한다 .container{ display: flex; } 컨테이너에 flex속성을 반드시 주자 flex-direction 이 컨테이너 안 친구들에게 방향을 줄 수 있다 .container{ display: flex; flex-direction: row | row-reverse | column | column-reverse; //좌->우 //우->좌 //상->하 //하->상 } row가 기본값이고 가로값 colu.. [css] position 개념정리 (absolute, relative, fixed..) pisition은 float와 달리 박스 모델을 원하는 장소에 배치하는 것을 목적으로 한다 다른 박스 모델 위에 배치할 수도 있고 안움직이게 고정할수잇다 함 살펴보자 속성: absolute fixed relative static inherit 부속 속성: top left bottom right z-index 부속 속성은 속성이잇어야 작동하는 애들이다 속성 설명 absolute 처음 위치한 박스나 다른 조상요소 기준으로 절대위치 fixed 다른 조상 요소 기준으로 위치고정 /top, left, bottom, right 적용하면 절대 위치 배치되서 완전고정된다 relative 기본위치부터 top,left,bottom,right에의해 위치 결정 ↑애들이 없으면 static과 같은 속성이 된다 static po.. [css] float사용법, 반응형 웹 만들기 (right, left, none...) flex box라는 개꿀 기능이 나오기 전에는 flaot사용이 필수고 이래저래 손봐야 했다 레이아웃를 잡을 때 가장많이 사용하는 속성 중 하나다 빨리 알아보자 right, left ,none 이렇게 3가지 속성만 있다 none을 사용하게 되면 박스가 움직이지 않는다 사이드 바와 본문에 left와 right를 주어서 왼쪽, 오른쪽으로 정렬 되어있는 것 볼 수 있다 aside{ //사이드 바 float: left; //좌측정렬 width: 200px; min-height: 250px; } article{ //본문 float: right; //우측정렬 width: 580px; } 그치만 크기를 고정해 버리면 요즘 유행하는 반응형 웹사이트를 만드는데 제한 된다 사이드 바의 크기는 고정한 상태로 본문 크기만 가변.. [css] 박스모델 자세하게 알아보자 (margin, padding, border, background..) 박스 모델은 말 그대로 박스를 만드는 것 css의 처음이자 마지막이다 알아보자 마진과 패딩 컨텐트를 감싸고 있는 친구가 box 그 실선이 border다 패딩(padding)은 박스 모델의 내부와 외부 공간을 구성하는 속성이다 콘텐츠를 기본으로 보더(border)까지 공간을 패딩이라 하며 보더부터 점선까지 마진(margin)이라고 한다 .box1{ margin: 30px; //바깥으로 30px씩 padding: 30px; //안쪽으로 30px씩 border: 5px solid red; //테두리 5픽셀로 빨간색 width: 500px; // box너비 500px } 하나의 값을 적용하면 네 가지 방향(상,하,좌,우)으로 공간이 생겨 밀려난다 하나씩 해줄 수도 있다 .box1{ margin-top: 30px.. [css] 선택자의 종류 자세히 알아보자!! HTML 문서의 특정 영역이나 요소 등을 선택해줄 수 있는 장치가 필요하다 요것을 CSS에서는 선택자라고 부른다 뭘 가리키는 지 알아야 가져오지 용어 내용 태그 선택자 tag selecter HTML 태그에 속성 적용 클래스 선택자 class .로 시작하는 선택자 아이디 선택자 id #으로 시작 종속 선택자 dependant 선택자에 종속된 선택자 하위 선택자 descendant 선택자 내부의 모든 후손 선택자 전체 선택자 universal 전체 문서에 영향을 줌 그룹 선택자 group 여러 선택지를 복합적으로 적용할 때 자식 선택자 child 선택자 바로 밑의 자식 선택자 인접 선택자 adjacent 붙어있는 선택자와 선택자에 특정 효과 줄 때 사용 가상(수도)선택자 psudo-classes 단독으로 .. [HTML] input 태그를 알아보자 ② input type외에 input에 따로 속성을 줄 수 있다 placeholder로 미리 값의 예를 보여주고 type="submit"으로 값을 전송하는 버튼이 된다 이런거 말고 더 알아보자!! input 속성 설명 autofocus autofocus가 지정된 부분에 커서가 깜박인다 form input에 form 속성을 적용하여 form 외부에 있는 input속성을 적용한다 datalist 미리 지정된 값을 리스트 형식으로 불러오거나 보여준다 min and max input 값의 최솟값과 최댓값을 지정해 줄 수 있다 multiple input 부분에 여러 개의 파일을 불러 올 수 있게 한다 pattern 지정된 패턴 값을 입력 가능하게 해준다 placeholder input 부분에 미리 값 또는 입력 예를.. [HTML] input 태그를 알아보자 ① 이전에는 단순히 text, password, checkbox, radio button, image, file 정도의 타입만 있었지만 HTML5에서는 더 많은 타입이 추가 되었다 크롬 MS엣지 오페라 같은 건 대부분이 되지만 익스플로어는 안되는게 몇 개 있다 제발 익스플로어 쓰지마!!!!! HTML5부터 사용 가능해진 친구들이다 input type 설명 color 색상값 입력 date 날짜 입력 datetime 날짜와 시간 입력 (타임 존 적용) datetime-local 날짜와 시간 입력 (타임존 ㄴ적용) email 이메일 주소 입력 month 년도와 월을 입력할 때 사용 number 지정한 숫자 입력 range 숫자의 범위 지정 search 검색 폼 지정 tel 전화번호 입력 time 시간 입력 url.. git과 github란? 간단한 명령어 정리 출처: 얄팍한 코딩사전 youtu.be/Bd35Ze7-dIw 이 형님은 개쩌는 것 같다 내가 사용하면서도 제대로 활용하지 못했었던점을 되짚게 되었다 구독하자 git 쓰는 이유 1. 버전 관리: 프로젝트 작업을 하다보면 더하고 빼고 수정하고 과거내용 확인과 클라이언트의 '어.. 저번께 더 나은것같은데요?' 의 경우를 위해, 시간을 되돌리기 위해 사용한다 2. 협업: 같이 일하려면 코드를 공유해야한다. 복붙으로 전달 할 순 없다 git: 버전 관리를 위한 소프트웨어 Github: git으로 저장돼서 원격전송된 내역들이 저장되는 공간을 제공하는 서비스 쉽게 말해서 git은 영상 찍는 카메라 앱이고 github는 유튜브다! 명령어 정리 폴더 이동 cd (프로젝트폴더) //이동 이 폴더의 모든 내용 수정내역 저장.. 이전 1 ··· 15 16 17 18 19 다음
