Hansel

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

body에는 3개의 div태그가 있고 위의 사진처럼 1 2 3 을 표시하고 있다. 각 태그마다 클래스는 item으로 지정했고 속성은 위의 사진과 같다. 3개의 태그를 총괄하는 div태그는 container로 id지정을 했다. flex 설정을 위해서는 적용을 원하는 태그 속성에 display:flex를 지정해주면 된다. 현재 flex-direction은 column으로 flex컨테이너 안의 item들의 방향을 정해준다. column이므로 열 방향 세로로 지정되었다! flex-wrap을 써서 잘린 부분을 위로 올려준다. 크기에 맞게 잘렸다 justify content는 정해진 방향을 기준으로 수평으로 item을 정렬한다. 현재 direction은 row니까 행(가로)로 나열되어 있다. space-betwee..

1. 우선 form action 은 my-app인데 이부분은 지금은 생략함. 보낼 곳이 없어서 어차피 의미가 없음 method 는 post방식인데 get방식을 했다면 주소창에 내가 입력한 id와 password가 보일수 있다. 그래서 로그인은 post 방식을 사용한다. 2. 전체적으로 보면 레이블이 덕지덕지 붙어있다. 입력창을 위한 소개? 설명? 문이라 생각하자. 3. 보면 인풋 타입이 꽤 많은데 종류는 다양하다. text도 있고 password도 있다. text의 경우 일반적인 텍스트이며 입력함과 동시에 내가 입력한게 보인다. password는 ***이런식으로 가려져서 보인다. placeholder는 해당 입력칸에 보이는 연한 글자다. 해당 인풋칸에 어떤것을 입력하라고 가이드해주는 용도로 생각하면 된다..

1. head 부분의 무료 폰트 사이트(noonnu)에서 아무거나 골라 웹폰트로 사용 부분을 복사, 스타일 태그에 붙여넣는다. 그 후 해당 폰트를 사용하고 싶다면 font_family : '~~' 부분을 복사해 사용하고 싶은 태그에 style 쪽에 넣어주면 된다. 2. body 내부 첫번째 태그 글 색은 brown 그리고 해당 h태그 배경색은 노란색으로 지정했다. text-align : center 로 글자를 가운데 정렬했고 font-size로 폰트사이즈를 키웠다. border-radius : 를 사용해 해당 제목 부분의 테두리를 둥글게 만들었음. 3. 22줄 해당 줄은 이미지를 가운데 정렬 하기 위해 이미지의 앞 뒤로 div 태그와 style을 붙여 작성했다. 4. 그 바로 다음에 나오는 p태그와 a ..

리스트는 저번에 다루긴 했는데 여기선 리스트 내부에서 세부적인 것들을 조절하는 코드가 나온다. 에서 type은 ordered 리스트의 글머리 기호가 대문자 알파벳이라는 뜻이다. A. 둘하나 B. 둘둘 이런식으로 그 아래에 있는 는 글머리 기호의 시작이 5부터 하겠다는 뜻이다. ordered 니까 1부터 시작하는데 start를 5로 지정했으니 첫 시작은 5이고 reversed 가 들어갔으니 거꾸로 5 4 3 이런식으로 글머리 기호가 붙여진다.

코드는 간단하다. 링크이름 width랑 height는 높낮이 설정 , alt는 대체제이다. 사진이 로드되지 않았을때 뜨는 이름? 테이블 생성은 로 한다 그 내부에서 과 같은 것들을 만드는데 테이블로우 , 행값이다. 행값으로 처음에 성별 학년 이름 을 줬으니까 첫줄에는 성별 학년 이름 이 나온다. 는 테이블 헤드이다. 내부 rowspan은 해당 테이블 요소가 칸을 얼마만큼 차지할지 정하는 문이고 열은 colspan이다. 요래 나온다. 진짜 안이쁘다..

우선 h1이나 p는 자주 봤으니까 넘기구요. strong은 그 글자를 볼드체 해줍니다. em은 글자를 강조하는데 영어에서 이태리체 처럼 기울게 됩니다. pre는 p랑 다르게 쓴 그대로 보여집니다. 코드에서 줄바꿈 한 그대로 페이지에서 보여져요. 그 밑에 오는 sub는 일반적인 글자보다 약간 아래로 오게 해줍니다. log 표현처럼요. sup는 sub 반대로 생각하면 되겠죠? 일반적인 글자보다 위로 오게 해줍니다. 2^5 같은 제곱을 표현하기 좋아보입니다. ins는 밑줄 del은 삭제한다는 의미로 글자에 줄을 그어줍니다. 간단하니 아직까지는 그냥 익히면 될거같다.