전체 글
CSS Transform
Transform이란 뭔가 변형에 관련된 CSS 속성이다 뭔가 굴린다거나 변형시킨다거나 등등.. 심지어 3D도 가능하다 또한 하드웨어 가속으로 꽤 부드럽게 작동한다고하여 성능면에서 모바일 앱에서도 자주 사용하는 편이다 A B C D F .box-container { display: flex; } .box { width: 100px; height: 100px; border: 2px solid #222; background: rgba(30, 161, 255, 0.5); } 박스 변형 일으키기 :hover .box:hover { transform: scale(2); } width와 height의 동작 방식은 조금 다르다 scale 속성과 다르게 width와 height는 아래 텍스트가 밀리게 된다 여러가지 값..
CSS 기초
박스모델 width, height, padding, border, margin html 문서는 박스 형태로 되어있다 박스가 일정한 형태로 모델이 구성되기 때문에 박스 모델로 불린다 content 이 박스에 가로가 width, 세로는 heigth를 담당한다 padding content와 border 사이에 안쪽 여백 공간을 표현하는 것을 일컫는다 테두리사이 공간을 주는 것 css에 padding:top 20px를 작성하면 content 기준으로 위로 20px 밀려나게 된다 border 테두리를 나타낸다 어떤 테두리가 원하는지 알려줘야한다 ( 굵기, 스타일, 색상 ) 등 1px solid #222 margin 바깥 쪽 여백을 뜻하며 요소와 요소 사이의 간격을 나타낸다 box .box { width: 300p..
head에 들어가는 태그(title, link, style, script) (#18)
title, link, style & script는 정말 많이 쓰고 html 문서를 만들 때 거의 무조건 사용됩니다 html문서의 대 제목 지구 모양 대신 다른 이미지도 사용가능합니다 아래 값에서 href 주소만 변경하면됩니다 절대경로, 상대경로 모두 가능합니다 *절대경로,상대경로 뜻 2020/11/10 - [개발은 처음이라] - image 태그(#10) link css 스타일시트에 첨부하는 태그입니다 link:css를 입력하면 자동으로 링크가 생성됩니다 폰트도 링크 태그에서 사용됩니다 https://spoqa.github.io/spoqa-han-sans/ko-KR/ Spoqa Han Sans Spoqa unveil the new version of Spoqa Han Sans, which has evol..
Form - select & option (#17)
셀렉트는 선택을 할 수 있게 하는 태그입니다 셀렉트는 기능을 만들 수 있게 해주고 옵션은 기능 태그입니다 1 2 3 4 5 서로 구분할 수 있게 value를 지정하여 값을 넣어줍니다 단, 서로 값만 다르면 됩니다 드라마 예능 로코 액션 스릴러 제출
Form - Lavel (#16)
라벨 라벨은 부가적인 태그이고 필수로 사용하지 않아도 됩니다 주로 박스에 이름을 달아줄 때 사용됩니다 즉. 폼 양식에 이름을 붙이는 태그라고 할 수 있습니다 라벨은 특정 인풋에 이름을 나타냅니다 어떤 인풋으로 연결되는지 반드시 써야합니다 라벨을 사용할 땐 반드시 "for"가 들어갑니다 라벨 여기서 누구에 들어가는 값은 라벨 라벨 내가 연결시키고자 하는 인풋ID값을 적어주면 됩니다 보통 ID값엔 #이 들어가는게 정상이지만 for에는 #을 적지 않습니다 ID에 적었던 값을 for에 적습니다 그러므로 input에 ID에 적은 값을 for에 넣어줍니다 여기서 코드를 적고 이름 부분을 클릭하면 박스가 활성화되면서 연결된 것을 알 수 있습니다 이름 회원가입 폼 관련 글은 2020/11/13 - [개발은 처음이라] ..
Form - input (#15)
minlength,maxlength는 내가 입력할 수 있는 자체 개수를 정한다면 min,max는 입력할 수 있는 최솟값을 입력할 수 있습니다 minlength,maxlength는 텍스트 개수라면 min,max는 숫자 값을 의미합니다 혹은 파일 형식이 .png 나 .jpg만 삽입 가능했으면 좋겠다라고 한다면 accept=".png, .jpg"를 사용합니다 임시로 만든 word 파일은 비활성화 되어있습니다 여기까지입니다 폼과 알려드린 속성,타입을 활용하여 회원가입 폼을 만들어보세요 많은 도움이 됩니다
Form - input (#14)
1 사용자에게 인풋값. 어떤 정보라던가 데이터 필드를 생성할 때 쓰는 가장 기본 태그입니다 입력하는 공용 태그라고도 불립니다 type=" " 안에 반드시 적어줘야하는 내용이 있습니다 총 코드를 올려 드리겠습니다 같이 따라하셔도되고 포스팅만 보셔도 됩니다 Git에 코드 첨부하겠습니다 사용 방법을 알고 계신 분들은 코드만 가져오시고 잘 모르시는 분들은 영상을 참조해주세요 https://github.com/kimhaeryun/hearyun_blog input 값의 더 세세한 내용은 다음 포스팅에 올리도록 하겠습니다 2020/11/13 - [개발은 처음이라] - Form - input (#15) Form - input (#15) minjunkass.tistory.com code * { margin: 0; box..
Form - 1 (#13)
요즘엔 잘 안쓰기는 추세이긴 하지만 그래도 기초를 공부하고나서 좀 더 효과적인 방법을 택할 때 까지의 이해가 필요하니 포스팅 해보도록 하겠습니다 폼은 사용자로부터 정보나 데이터(input)을 받기 위한 태그입니다 폼을 사용할 땐 브라우저에게 정보를 알려줘야합니다 1 여기서 반드시 작성해줘야하는 내용이 있습니다 action="API 주소" methon="GET" , "POST" 사용자로부터 데이터를 받았다고 가정하고 "제출" 버튼을 눌렀는데 아무 반응이 일어나지 않는다면 action 값을 확인해야합니다 사용자로부터 Form을 작성하게 했다면 값을 가지고 처리해야하는 과정이 있습니다 즉, 서버 어딘가,누군가에게 값을 전달해줘야합니다 이떄 목적지 값을 명시해주는게 action 안에 들어갑니다 methon에서 ..