계발하는 개발자

반응형 웹페이지 제작에 많이 쓰는 사이즈 단위인 rem, em에 대해 알아보겠습니다. 보통의 정적인 요소들에 폰트사이즈를 고정크기인 px(픽셀) 단위로 설정하는 게 일반적이지만, 화면 크기 배율에 따라 상대적인 폰트값을 적용하려는 경우가 생기기 마련입니다. 이때 사용하는 것이 rem, em 되겠습니다. 여기서 1.5em, 1.5rem은 각각 1.5배 해주는 것이라 보시면 됩니다. 앞서 '화면 크기 배율'에 따라 상대적인 크기값을 준다고 정의했는데요, 어떤 것이 배율의 기준이 될까요? 어떤 요소의 1.5배를 말하는 걸까요? 이에 대해 rem과 em은 서로 다른 특징을 지닙니다. rem은 문서의 최상위 부모인 html을 기준으로 배율값을 지정해주는 크기 단위입니다. rem의 뜻은 최상위를 뜻하는 root의 ..

변수란? 값이 여러 번 달라질 수 있는 데이터. (반대로) 상수란, 값을 한 번 지정하면 바뀌지 않는 데이터 나이 = 올해 연도 - 태어난 연도 + 1 = 값이 언제든 변하는 '변수' = 값이 항상 일정한 '상수' 변수 선언 규칙 영문자, 언더스코어(_), 숫자를 사용 첫 글자는 영문자, _ 기호, $기호를 사용 띄어쓰기나 그외 기호는 x Ex) today, _today, today24 (사용 가능) Ex) 24today, today 24, *today (사용 불가) 여러 단어를 연결할 때는 하이픈이나 언더스코어, 대문자 혼용 가능 Ex) total-area, total_area, totalArea 등 변수 명은 의미있게 작성 변수 선언 (단일 변수) var + 변수 var currentyear; var..

📂Flexbox란? CSS의 display 속성 중 하나로, 요소들의 레이아웃 , 정렬 , 그리고 간격을 설정 하는 데 사용할 수 있다. Flexbox 구성요소 - container, item Flexbox를 구성하는 요소들에는 container와 item 두 개념을 들 수 있다. 먼저 위 코드블럭에서처럼 각각의 input들을 감싸는 container가 있다. 여기서 container는 "button" 클래스명의 태그다. container는 flexbox를 사용하기 위해 필수적이며, 지금부터 소개할 여러 속성값을 통해 요소 배치 및 배열 등 적절한 효과를 줄 수 있다. *참고로 flexbox를 사용하기 위해선 container에 반드시 display:flex 속성을 넣어주어야 한다! item은 flexb..

우리가 특정 사이트에 로그인 할때, 해당 계정의 접속을 위해 아이디와 비밀번호를 입력하라는 로그인 관문을 맞닥뜨리게 된다. 내가 기존에 가입한 사이트는 데이터베이스 서버로 나의 계정 정보를 이미 가지고 있기 때문에, 나의 아이디 & 비밀번호를 입력해서 서버에 내 정보와 일치하면 로그인을 할 수 있다. 이때 웹페이지에서 서버로 내 계정 정보를 보내야 되는데 이때 사용되는 HTML의 태그가 FORM 이다! 📂 FORM(폼) 태그란? 사용자로부터 입력받은 양식 전체를 감싸는 태그로, form태그 내부에 있는 input 태그에 회원가입이나 로그인, 글 작성에 필요한 정보들을 입력 후 제출하면 웹사이트에서 받은 사용자 정보를 바탕으로 사용자에게 할당된 데이터를 서버(=백엔드)로 전송한다. Form 속성 Form ..