우당탕탕 개발일지

css와 박스 모델 블록 레벨 요소와 인라인 레벨 요소 블록레벨 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지한다. 즉 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. 너비와 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야한다. ex) .. 인라인 레벨 : 줄을 차지하지 않아 나머지 공간에는 다른 요소가 올 수 있다. ex) ... 박스 모델(box model) : 박스 형태의 콘텐츠 - 태그 하나하나를 일종의 박스로 취급하여 그것의 부피를 결정한다. * 네 방향의 스타일을 다 따로 설정할 수 있다. * 1. 패딩(padding) : 박스와 콘텐츠 영역 사이의 여백 2. 테두리(border) : 박스의 테두리 3. 마진(margin) : 여러 박스 모델 사이의 여백 width..

웹에서 색상 표현하기 16진수 표기법 # 기호 다음에 6자리의 16진수로 표시하는 것이다. RR자리에는 빨간색, GG자리에는 초록색, BB자리에는 파란색의 양을 표시한다. 각 색상마다 하나도 섞이지 않았을을 표시하는 것은 00, 가득 섞였음음을 표시하는 것은 ff까지 사용할 수 있다. #000000는 검정색이고 #ffffff은 흰색인다. 예를들어 #ffff00은 빨간색과 초록색은 가득 섞였음을 표시하고 파란색은 전혀 섞이지 않았음을 나타낸다. rgb와 rgba표기법 rgb) 16진수 표기법처럼 빨간색, 초록색, 파란색 순서로 표기하지만 16진수가 아닌 십진수로 표기한다. 하나도 섞이지 않았을 때는 0(흰색), 가득 섞였을 때는 255(검정색)으로 표시한다. 예를 들어 빨간색을 표시하고 싶으면 rgb(25..

글꼴 관련 스타일 font-style : 글꼴 지정하기 -글꼴을 지정할 대 하나만 지정할 경우 지정한 글꼴이 없을 경우에 대비해서 두번째, 세번째 글꼴까지 지정해야한다. 쉼표( , )로 구분한다. @font-face : 웹 폰트 사용하기 - 웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로 드시키는 방식이다. 구글 웹 폰트 사용하기 : 사용방법 구글 폰트 접속 - 원하는 폰트 클릭훙 오른쪽에 [Embed] - [@import] - 소스복사/ 글꼴 이름 기억 복사한 소스를 태그에 붙여 넣고 font-family 에 기억해둔 글꼴이름 넣는다. font-size 속성 : 글자 크기 조절하기 브라우저에서 지정한 글자 크기이다...

CSS 기초 왜 스타일을 사용할까? 1. 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있습니다 -웹 문서 내용과 디자인이 구분되어 있기 때문에 사이트 내용을 수정해야 할 때도 디자인에 전혀 영향 미치지 않고 내용수정만 가능하다. 2. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다 -대상 기기에 맞게 CSS만 바꾸어 주면 같은 내용을 여러 기기에 어울리게 볼 수 있습니다. 스타일 형식 p { text-align: center; } p 를 선택자/셀렉터, text-align: 을 스타일 속성, center; 을 속성 값이라고 한다. - 스타일 속성에는 : (콜론)이 붙고, 속성 값에는 ; (세미콜론)이 붙는다. 스타일을 표기하는 방법 아래의 소스는 모두 다 같은 소스이지만 공백의 차이이다. 공백..

폼 만들기 폼이란? : 사용자가 웹사이트로 정보를 보낼 수 있는 요소들을 말합니다. (로그인버튼, 회원가입 창 등) 태그 : 폼 만들기 - 태그 사이에 폼 요소와 관련된 태그를 넣습니다. 여러 폼 요소 form 태그 속성 method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정합니다. 속성 값 get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러납니다. 256byte~4096byte까지의 데이터만 넘길 수 있다. post - 대부분 이 방식 사용한다. 사용자의 입력을 표준입력으로 넘기기 때문에 입력 내용의 길이에 제한받지 않고 사용자가 입력한 내용이 드러나지 않는다. name 여러개의 태그가 있을 경우 구분하기 위해서 사용한다. action 내용들을 처리해 줄 프로그램을 ..

이미지 웹에서 하용하는 이미지 형식 GIF 색상수가 256가지뿐이지만 다른 이미지 파일 형식에 비해서 파일 크기가 크지 않기 때문에 불릿이나 아이콘과 같이 작은 이미지에 사용한다. 투명한 배경, 움직이는 이미지를 만들 수 있다. JPG, JPEG 저장을 반복하면 화질이 떨어질 수 있지만 다양한 색상과 명암을 표현할수 있다. PNG 다양한 색상표현이 가능하고 투명한 배경을 만들 수 있으며 네트워크용으로 개발되었기 때문에 최근에 많이 사용하는 이미지 파일 형식이다. 태그 :이미지 삽입하기 -scr 속성을 사용해서 이미이 파일의 경로를 알려줘야한다. src 속성 :이미지 파일 경로 지정하기 -이미지 파일 경로는 웹문서 파일의 위치를 기준으로 정한다. 예시1) 예를 들어서 index.html과 lotus.jpg..

텍스트 관련 태그들 태그 -제목표시하기 :~6까지 있으며 숫자가 작아질수록 글자의 크기가 크다. 태그 -단락만들기 :텍스트를 표시하는 단락을 만들때 사용하는 태그로 태그를 만날때까진 줄바꿈 없이 텍스트를 한줄로 표시한다. 텍스트 단락변경을 하고싶은 경우에는 을 사용하여 줄바꿈을 해준다. (닫는태그는 없음) 태그 -인용문 넣기 :다른 블로그나 사이트에서 인용한 글을 넣을 때 사용하는데 이때 이 태그안에 들어간 인용문은 다른 텍스트들보다 안으로 들여 써진다. 태그 -인용내용 표시하기 :인용한 내용을 표시하기 위해서 사용하는 태그이다. 태그와 태그의 차이점은? 태그는 줄이 바뀌어지고 다른내용과 구별되어지도록 안으로 들여지지만 태그는 줄바꿈이 없고 다른 내용과 함께 한 줄로 표시된다. 또한 인용내용에 따옴표를 ..

엑셀문서는 작성하는 프로그램과 작성한걸 보는 프로그램이 같다. 하지만 웹문서는 다르다. 웹문서를 작성하는 프로그램을 '웹 편집기(web editor)' 그리고 보는 프로그램을 '웹 브라우저(web browser)'라 한다. 여기서 웹 브라우저란? 기본으로 윈도우에 포함되어있는 인터넷 익스플로러, 엣지, 크롬, 파이어폭스 같은 프로그램을 칭한다. HTML이란? HTML의 약자는 HyperText Markup Language이며 하이퍼텍스트를 마크업하는 언어라는 뜻이다. Hypertext: 링크를 눌렀을 때 즉시 다른 문서나 사이트로 이동할 수 있는 기능 Markup: 태그(tag)를 이용해서 문서의 어떤 부분이 제목이고 본문인지, 사진인지 링크인지 표시하는것을 말합니다. HTML의 역사 초창기에는 웹브라우..