본문 바로가기

전체 글

 (149)
CSS- position position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top, right, bottom, left 속성이 요소를 배치할 최종치를 결정합니다. position: static; position: relative; position: absolute; position: fixed; relative position: relative; 자체로는 특별한 의미가 없습니다. 딱히 어느 위치로 이동하지는 않습니다. 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있습니다. top, right, bottom, left은 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티 입니다. .relative { position: relative; }..
css -input , index.html 을 실행시켜주세요. type, placeholder라는 attribute가 있습니다. 왼쪽 결과화면에서 각각 input 요소에 커서를 두고 타이핑해보세요. 1. type="text" text를 입력하는 속성입니다. 대부분의 input type은 text 입니다. 어느 텍스트나 입력할 수 있습니다. 이름, id, 주소, 닉네임 등을 입력 받을 때 사용합니다. 2. type="password" text와 비슷한 속성인데, 뭔가를 입력하면 까만 원으로 나옵니다. 만약 화면을 공유하고 있다면, 남이 보지 않도록 처리한 것입니다. 화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있습니다. 3. type="number" 숫자만 입력할 수 있습니다. 만약 typ..
css -table 목록을 표현했을 때 항상 or 과 의 조합이 필요했듯이, 테이블을 표현하기 위해 여러 태그들의 조합이 필요합니다. , , , , , 등이 있습니다. 테이블은 항상 태그로 감싸져있습니다. 태그 내에 행도 만들고, 열도 만들게 되는 것입니다. 한 행을 시작할 때는 로 시작합니다. tr은 table row의 줄임말입니다. 각각의 셀은 태그 내에 태그를 사용합니다. td는 table data의 줄임말입니다. 이번에는 대신 태그를 사용했습니다. table heading의 줄임말입니다. th태그를 사용했더니 가운데정렬이 되고, 글씨 두께가 두꺼워졌습니다. 물론 td태그를 그대로 사용하고, css로 같은 효과를 낼 수도 있습니다. 나 태그에 colspan, rowspan이라는 attribute를 추가해서 구현할 수 ..
css-list 목록을 표현하는 태그는 입니다. List Set HashMap (Dictionary) Queue Stack Tree Sorting Search 목록에서 List, Set, HashMap.. Search까지 목록아이템 하나하나를 태그로 감싸줍니다. 그리고, 목록 전체를 태그로 감싸줍니다. 은 ordered list라는 의미로, 결과화면과 같이 목록에 숫자를 달아줍니다. 왼쪽 결과 화면을 보면, 우리는 숫자를 쓰지 않았는데 자동으로 numbering 되었네요. 하지만 우리가 원하는 것은 자동으로 numbering 되는 것이 아닙니다. ol 대신에 numbering이 되지 않는 ul 태그를 사용하겠습니다. 태그는 unordered list라는 의미입니다. 숫자 없는 목록을 표현해줍니다. List Set Has..
css-margin auto .center { margin: 20px auto; } 엇! 앞에서 margin을 배웠을 때 1개나 4개의 값을 주었습니다. 1개 값이 있을 때는 사방 모두 같은 margin을 준다는 의미였고, 4개 값이 있을 때는 위/오/아래/왼 순서로 margin을 준다는 의미였습니다. 이렇게 2개의 값만 있을 때의 의미는 첫 번째는 위, 아래의 margin이고 두 번째는 왼, 오른쪽에 주는 margin이라는 뜻입니다. 위의 css를 풀어쓰면 아래와 같습니다. .center { margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto;
css -Block vs Inline 대부분의 HTML element(이하 요소)는 block 요소입니다. 예를 들어, , , , , , , 등이 모두 block 요소에 해당하는 태그들입니다. block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻입니다. block 요소와 성질이 반대인 inline 요소도 있습니다. , , 태그 등이 inline 요소입니다. inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻입니다. 첫 번째부터 네 번째까지는 태그 같은 block 요소입니다. 노란색 영역이 해당 요소가 차지하는 영역입니다. 텍스트는 짧은데 그 이상으로 영역을 차지하고 있습니다. block 요소들은 이런식으로 항상 새 줄에서 시작하며 좌우로 최대한 늘어납..
css - img 태그로 이미지 넣기

티스토리툴바