안드로이드 웹앱 콘테츠 개발자 양성(국비지원)/HTML+ CSS29 HTML+CSS ( 기초) float 속성 [이미지 배치해보기] float를 이용하여 이미지를 배치해보자. 우선 링크 요소에 이미지도 넣자. 처음 쓴 한줄을 복붙해서 여려개 넣자. (임의 이미지 사용) div는 한줄을 차지하기(블럭요소) 때문에 한줄 한줄 나온다. float 속성을 이용하면 옆으로 배치 가능하다. div는 자동으로 margin,padding이 있으므로 (sunshine 등 글자에 공간이 많다.), 보통 0px로 쓰고 시작한다. 이미지들에 배경을 넣어보자. 그러나 생각했던 것처럼 적용이 안된다... overflow 속성을 이용하면 float를 해도 같이 배경색을 줄 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 Gallery di.. 2019. 12. 9. HTML+CSS (기초) float 속성 사용하기. 이제 최종 화면 처럼 만들기 위해 임의 이미지, 글을 추가해보자. 뉴스 신문 기사 처럼 이미지 + 텍스트가 배치 되도록 해보자. 우선 이미지 먼저 임의로 사용한다. lor 자동 입력을 하면 긴 글이 생성될 것이다. p요소로 썼기 때문에, 아래에 배치된다. img에 float:left 속성을 주면 왼쪽으로 붙고 위로 뜬 느낌이 된다. 그러면 p요소가 옆에 보여진다. float의 문제를 보기 위해 p 요소를 추가해보자. 위 사진과 같이 웹 페이지를 늘리면, 이미지 아래에 놓고 싶더라도 다시 이미지 옆에 놓인다. 이것을 이미지와 먼저 있던 글과 무관하게 아래에 놓고 싶다면 아래 코드를 추가하자. 이미지와 그 오른쪽에 있는 글이 너무 붙어 있다. 마진을 줘보자. 새로 p요소를 추가하고, 배경을 주면 확연히 보일.. 2019. 12. 9. HTML+CSS (기초) display, position 속성 스타일 적용하기 파일을 만들고 스타일을 적용할 글자를 쓰자. 우선 블럭요소와 인라인 요소의 차이를 알자. a요소 인라인 요소라서, em요소를 쓰면 옆에 나열된다. 블럭 요소를 인라인 요소로 변경할 수 있다. 옆에 공백을 주고 싶다면.. 아래 사진처럼 width를 추가하자. 이미지로도 연습을 할 것이기 때문에, 하나의 이미지를 준비하자. (연습에는 lion.png 파일 하나만 사용.) img도 인라인 요소라서 웹페이지가 옆으로 넓다면 같은 라인에 놓여진다. 아까전에는 블럭 요소를 인라인 요소로 바꾸었지만, 인라인 요소를 블럭 요소로 변경할 수 있다. 리스트로도 연습을 해보자. 임의로 리스트를 만들겠다. id가 cc인 것에 none 속성을 주었다. [공간도 안차지하고 안보임] 이제 주의할 점을 보겠다. 블럭 요소에 블럭을 .. 2019. 12. 6. HTML+CSS (기초) table 스타일 적용하기 우선 새 파일을 만들고 테이블을 만들어 보자. 테이블은 요소를 사용해도 알아서 줄이 그어져 있지 않다. 테이블에 선을 그어보자. 이 모양은 우리가 원하는 모양이 아닐 것이다. 안에 th,td에도 선을 그어야 한다. 만약 경계선이 두줄이 마음에 안들면 합칠 수 있다. 테이블 칸에 너무 글자들이 꽉찬 느낌이다 간격?을 주자. 글자들이 왼쪽에 위치해 있다.. 보통 가운데가 보기 좋으니, 가운데 정렬을 해보자. 맨위 th에[이름, 이메일] 색을 적용해보자. 짝수 줄에만 배경색을 다르게 적용해보자. 맨위 이름, 이메일 칸에 빨간색 밑줄을 그어보자. (이름, 이메일 칸 밑줄이 빨간색이다.) 이제 흔히 오해하는 점이 있다. 원래 table에는 자식이 3개 있다. thead, tbody, tpooter 그러나 안써도 .. 2019. 12. 6. HTML+CSS (기초) 리스트 스타일 적용 [홈페이지 로고,텝 같은.. 기초적 만들기] 약간 홈페이지 처럼 만들어보자. 텝 선택하듯이 (리스트 이용) 리스트에 있는 요소들을 한줄에 표현하자. 보기에 안좋다. 요소간 간격을 주자. 위,아래 줄를 긋자. 링크는 자동으로 줄이 그어져 있다. 줄을 없애자. 마우스 올렸을 때만 밑줄이 생기도록 해보자. 글자들이 작성한 그대로 나오지만, 자동으로 대문자로 표시되게 해보자. 홈페이지 로그처럼 배경색과 글자를 써보자. 이미지도 당연히 적용 가능하다. 배경에 이미지를 추가로 적용해보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 EX ul{lis.. 2019. 12. 6. HTML+CSS (기초) 링크, 이미지, 리스트 스타일 적용[배경색, 이미지 적용, ] a 요소 부터 차근차근 연습해보자. 우선 기본적으로 글씨를 쓰고 거기에 적용해보겠다. 여러 스타일을 적용해보자. [누르기 전 색깔, 누른 후 색깔, 마우스를 올렸을 때, 클릭을 한 순간] hover를 마우스 올렸을 때도 가능하다. 위의 사진은 전체 배경색이 바뀌지만, 특정 요소 배경에만 적용이 가능하다. Hello를 쓰고, 거기에만 적용해보자. 이미지에도 배경색을 적용해보자. 이미지에도 hover적용 가능하다. 마우스 포인트를 올렸을 때 리스트에도 스타일을 적용해보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 4.. 2019. 12. 6. HTML+CSS (기초) 경계선 및 배경색 스타일 적용 1-2 맨 아래 복붙용 코드 있음 이어서 하겠다. p단락에 임의로 긴글을 여러줄 썼다. 스타일도 적용했다. 흘러 넘친 것을 테두리 안을 넣어보자. (스크롤, 가운데 정렬) 이미지 배경도 넣어보자. (반복 적용 x , 가운데 위치하게 ) 브라우저 기준으로 가운데 위치하게 할 수 도 있다. 다만, 저 파란색 박스 안에서만 보이기 때문에 가운데 .. 주의 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 7.. 2019. 12. 6. HTML+CSS (기초) 경계선 및 배경색 스타일 적용 1-1 새로 파일을 만들겠다. 화면을 보고 확인을 위해 긴 글을 임의로 사용한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Box model Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa non facilis quidem aperiam asperiores soluta et deserunt repudiandae, velit minus ut labore quis dolor necessitatibus nesciunt officia. Consectetur, aspernatur nam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio harum c.. 2019. 12. 6. HTML+CSS (기초) font 적용과 text 스타일 속성 적용 하나하나 적용하면서 결과를 확인해보자. 우선 html 파일을 만들자. 이제 위 사진의 글씨에 font를 적용하겠다. [윈도우에서 지원하는 폰트를 가져와서 사용해보자 ] css 파일을 만들어서 적용도 가능하지만, 폰트만 확인할 것이기 때문에 html에 쓰겠다. (내부 스타일 ) 한글도 비교하기 위해서 한글도 써주겠다. 휴먼옉체 같은 것은 기본적으로 지원되는 폰트이다. 만약 다운받은 폰트를 적용하고 싶다면? 해당 파일을 드래그&드롭으로 동일 선상 위치에 가져다 놓는다. (예제에선 Day03폴더에 다 넣음 html, font파일) 폰트 크기도 지정 가능하다. 폰트 크기 픽셀로 지정 외의 배율로 가능하다. 폰트 두께도 조절 및 기울기도 가능하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .. 2019. 12. 5. 이전 1 2 3 4 다음
