본문 바로가기

HTML&CSS/HTML545

<HTML5+CSS3> 여러 요소를 원하는 형태로 배치하기 position 속성 – 원하는 형태로 요소 배치하기-웹 문서 안의 요소들을 자유자재로 배치해 주는 속성이다. 텍스트나 이미지를 나란히 배치하기도 하고 여러개의 요소를 가로나 세로로 원하는 위치에 배치할 수 있다. position속성 값(1)static : 요소를 문서의 흐름에 맞춰 배치합니다(2)relative : 이전 요소에 자연스럽게 연결해서 배치합니다.(3)absolute : 원하는 위치를 지정하여 배치합니다(4)fixed : 지정한 위치에 고정하여 배치한다. 요소가 화면에 잘릴 수 있다. absolute의 예시ex) #a { position:absolute; //left와 top값에 맞춰 위치 고정 left:30px; //수평 좌표 top:50px; //수직 좌표 position:static 속.. 2018. 10. 18.
<HTML5+CSS3>배치와 관련된 블록 레벨과 인라인 레벨 블록 레벨 요소와 인라인 레벨 요소-블록레벨요소: 태그를 사용해 혼자서 한 줄을 차기하는 요소(왼쪽or오른쪽에 다른 요소가 못옴 div태그나 p태그)-인라인 레벨요소: 줄을 차지하지 않는 요소,다른 요소가 와도 상관 X (img태그,strong태그 등) 예를 들어, 목록은 블로레벨 요소이기 때문에 각 항목들이 한 줄에 하나씩 세로로 표시되지만, 목록을 인라인 레벨 요소로 바꿔서 지정하면 각 항목을 가로로 배치할 수 있다. 이런 방법으로 목록을 이용해 내비게이션 메뉴를 만들게 됩니다. 블록레벨태그 : p,h1~h6 , ul, ol, div, hr,table, fieldset , address인라인 레벨 태그 : img, object, br , sub , sup, span, input, textarea, l.. 2018. 10. 17.
<HTML5+CSS3>박스 관련 속성들 border-radius 속성 – 박스 모서리 둥글게 만들기-백분율 (%) 크기 값을 사용합니다. 값은 기본으로 4개까지 지정할 수 있다. 순서대로 top-left,top-right, bottom-left, bottom-right순입니다. (테두리 위 왼쪽,오른쪽 ) (테두리 아래 왼쪽,오른쪽) 값이 한 개라면 네 방향의 크기가 모두 같습니다. right값이 생략된다면 마주고있는 left와 같은 크기를 가지고 역시 반대도 마찬가지입니다. 속성 값(1)크기 : 둥글게 처리할 반지름 크기를 px나 em같은 단위와 함께 수치로 표시(2)백분율 : 현재 요소의 크기를 기준으로 둥글게 처리할 반지름 크기를 %로 지정. ex) div { border-radius : 20 px ; } ->모서리 부분 반지름 20px.. 2018. 10. 17.
<HTML+CSS3>테두리 관련 속성들 border-width속성-테두리 두께 지정하기-테두리 두께를 지정할 때 1px나 5px처럼 직접 크기를 입력할 수도 있고 thin이나 medium,thick같은 키워드 중에서 하나를 선택할 수도 있다. 속성 값thin위아래는 얇게 오른쪽은 굵게 왼쪽은 5px border-color속성 –테두리 색상 지정하기-이 속성을 사용하면 네 방향 테두리의 색상을 한꺼번에 설정할 수 있다. 속성 값(1)색상 값 :색상 이름이나 16진수 값, rgb값 등을 이용해 색상을 지정한다(2)transparent : 투명하게 나타낸다. 기본값임ex) border-color:red; ->빨간색 테두리 border-style 속성 – 테두리선 스타일 지정하기-테두리 스타일의 기본값은 none이므로 스타일시트에서 테두리 스타일을 .. 2018. 10. 17.
<HTML5+CSS3>레이아웃을 위한 스타일 박스모델 박스모델-박스형태의 텍스트 단락-박스모델요소:태그를 사용한 텍스트는 단락 형태를 가진다 즉,텍스트 단락 앞뒤에 빈 줄이 생기면서 텍스트 단란이 하나의 박스 형태를 갖게 되는 것이다.박스 모델은 사진과 같은 구조를 가진다.콘텐츠 영역: 텍스트 or 이미지 나타나는 영역패딩 영역 : 박스와 콘텐츠 영역 사이의 여백테두리 : 박스의 테두리마진 : 여러 박스 모델간의 여백 width,height속성 – 박스 모델 크기 지정하기-박스 모델은 마진이나 패딩을 이용해 적절한 크기를 만들 수 있지만, 강제로 정해야 할 경우에는 너비를 지정하는 width속성과 높이인 height속성을 사용한다.이때 지정하는 값들은 박스 모델의 콘텐츠 영역에 대한 크기이다. 따라서 실제 콘텐츠의 크기는 width와height에서 지정한 .. 2018. 10. 17.
<HTML5+CSS3>그라데이션 효과로 배경 꾸미기 선형 그라데이션-수직 방향이나 수평 방향으로, 혹은 대각선 방향으로 색상이 일정하게 변하는 것.방향과 색상을 반드시 알려주어야 한다. 선형 그러데이션 구문ex)linear-gradient(각도or위치,color-stop,[color-stop,..]); %단, 접두사를 사용한 선형 그러데이션과 위치 값은 다를 수 있으므로 454pg참고 다음은 왼쪽 아래에서 오른쪽 위 방향으로 빨간색이 점점 흰색 배경으로 바뀌어 가도록 그러데이션을 각도 구문으로 적용한 것이다.ex)linear-gradient(45deg,#ff0000,#ffffff) ->45도 빨간색, 흰색 (2)위치 : 각도 대신 위치로 그러데이션 방향을 지정할 수도 있다. 이때 위치는 그러데이션이 끝나는 위치를 나타내므로 to top이나 to right.. 2018. 10. 17.

티스토리툴바