<a onclick="window.open(this.href, '_blank', 'width=800, height=600'); return false;" th:href="@{/tournament/detail (index=${tournament.getIndex()})}">상세 보기</a>
onclick 요소를 이용하여 다음과 같이 설정하면 된다.
| [HTML+CSS] 도움되는 사이트들 (0) | 2023.05.25 |
|---|---|
| [HTML+CSS] 반응형 웹 (0) | 2023.05.25 |
| [HTML+CSS] grid (0) | 2023.05.24 |
| [HTML+CSS] flex (0) | 2023.05.23 |
| [HTML+CSS] 애니메이션 (0) | 2023.05.21 |
Bootstrap
강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기
getbootstrap.kr
부트스트랩: 기능이 풍부한 프론트엔드 툴킷이다. 레이아웃, 폼, 유틸리티, 아이콘 등, CSS로 디자인이 힘들 경우, 좋은 테마를 골라서 사용할 수 있다.
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
사이트를 만드는데, 유용한 아이콘들을 제공한다. 하지만, 회원가입을 해야하며, 회원가입을 하더라도 유료인 아이콘이 많다. 하지만 무료 아이콘들도 많으니 걱정 NO
Free Icons, Clipart Illustrations, Photos, and Music
Forum Mostly used for bugs, feature requests, and support.
icons8.com
여기도 아이콘을 제공하는 사이트, 위의 사이트와는 달리 회원가입을 할 필요 없다.
| [HTML] a태그 팝업창 띄우기 (0) | 2024.05.22 |
|---|---|
| [HTML+CSS] 반응형 웹 (0) | 2023.05.25 |
| [HTML+CSS] grid (0) | 2023.05.24 |
| [HTML+CSS] flex (0) | 2023.05.23 |
| [HTML+CSS] 애니메이션 (0) | 2023.05.21 |
반응형 웹 디자인 : 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현
뷰포트 : 스마트폰 화면에서 실제 내용이 표시되는 영역으로 <meta> 태그를 이용해 <head>와 </head>태그 사이에 작성
우선 title 태그 위에 뷰포트를 작성한다. 만약 작성하기가 어렵다면, 모든 HTML을 지우고, 느낌표(!)를 적고 탭을 누르면 자동으로 작성이 된다.
CSS에 백그라운드 이미지를 넣고, 이미지 반복을 없앤다. 그리고 모든 화면을 꽉 채우도록 백그라운드 사이즈에 cover를 설정한다.
max-width로 최대 1024px 이하 일 경우 다른 백그라운드를 적용하기로 했다. 적용 후, 창 크기를 줄여보니 백그라운드 이미지가 바뀌는걸 확인할 수 있었다.
또 하나 더 적용해보았다. 더 작은 크기 768px 이하일 경우 백그라운드 이미지를 변경한다. 그리고 창 크기를 더 작게 줄여보면 또 다른 이미지 하나가 나타나는걸 확인할 수 있었다.
| [HTML] a태그 팝업창 띄우기 (0) | 2024.05.22 |
|---|---|
| [HTML+CSS] 도움되는 사이트들 (0) | 2023.05.25 |
| [HTML+CSS] grid (0) | 2023.05.24 |
| [HTML+CSS] flex (0) | 2023.05.23 |
| [HTML+CSS] 애니메이션 (0) | 2023.05.21 |
먼저 wrapper라는 div 아래 4개의 div 상자들을 만든다.
박스의 부모 요소에 그리드를 설정한다. 먼저 display로 grid를 설정하고
grid-template-columns로 각 요소들의 넓이들을
grid-template-rows로 각 요소들의 높이들을 설정한다.
그리고 gird-template-areas로 그리드의 이름들을 배치해 놓는다.
(이름은 아무거나 적어도 좋다.)
중간에 보면 '.'라는 이름이 있는데, 그건 공백 지역이다.
각 박스의 특징을 설정하고, gird-area로 위에 gird-template-areas에 적어놓았던
이름들을 보고 놓고 싶은 곳의 이름을 넣어본다.
그럼 설정한 대로 박스들이 놓여있는걸 확인할 수 있다.
| [HTML+CSS] 도움되는 사이트들 (0) | 2023.05.25 |
|---|---|
| [HTML+CSS] 반응형 웹 (0) | 2023.05.25 |
| [HTML+CSS] flex (0) | 2023.05.23 |
| [HTML+CSS] 애니메이션 (0) | 2023.05.21 |
| [HTML+CSS] 가상 선택자 (0) | 2023.05.19 |
기본 한 줄 전부 차지하는 block 요소의 특성, 내부 요소를 꽉 채우려고하는 습성이 있다.
먼저 html을 이용해 div태그 안에 4개의 div 태그를 만든다.
그리고 CSS로 하늘색 컨테이너 안에 빨간 상자 4개를 만든다.
그리고 부모 div(#container)의 display를 flex로 지정한다.
flex 요소의 특성을 설명하는데 안 헷깔리도록 container div에 class를 설정하여 CSS에 따로 적도록 했다.
내부 요소를 진행시키는 방향을 결정
row : 기본값이다. 행 방향으로 상자들이 배열된다.
column : 열 방향으로 상자들이 배열된다.
참고로 row-reverse와 column-reverse를 이용하면 오른쪽에서 왼쪽으로 상자들이 배열된다.
둘다 내부 요소들을 어떻게 정렬할 지 정한다. justify-content는 정축 방향, align-items는 교차축 방향
둘다 center로 지정해놓으면, 정 가운데에 배치된다.
justify-content를 flex-start(기본값)으로 지정하면 그대로 오른쪽으로 붙고, flex-end로 지정하면 왼쪽으로 붙는다.
align-items를 flex-start로 지정하면 위쪽으로 붙고, flex-end로 지정하면 아래쪽에 붙는다.
justify-content를 space-between으로 지정한 모습이다. 양 끝 요소를 딱 붙이고, 나머지는 요소들의 여백을 동일하게 둔다.
space-around로 지정할 시, 각 요소들의 양쪽 간격을 동일하게 한다(그래서 양쪽 끝은 여백이 좁을 수 있다.)
space-evently로 지정할 시, 각 요소들 사이의 간격을 완전 동일하게 한다.
내부 요소를 다음 줄로 이동시킬지 결정한다.
먼저 html을 수정하여, 상자들을 많이 만든다. 그리고 flex-wrap에 nowrap(기본값) 지정
그러면 많은 수의 상자들이 다음줄로 이동하지 않고 한 줄에서 겹쳐진다.
내부 요소의 width와는 상관없이 한 줄 안에 채우려고 노력한다.
wrap으로 설정, 그러자 내부 요소의 width를 유지하여, 부모인 container의 width를 초과할 시, 다음줄로 이동
참고로 wrap-reverse로 설정하면 다음 줄로 이동할 때 반대방향으로 이동한다. (아래에서 위로 이동)
Flexbox Froggy라는 사이트이다. flex CSS코드를 이용하여 개구리를 이동시키는 게임인데,
flex를 연습하는데 많은 도움이 되었다.
| [HTML+CSS] 반응형 웹 (0) | 2023.05.25 |
|---|---|
| [HTML+CSS] grid (0) | 2023.05.24 |
| [HTML+CSS] 애니메이션 (0) | 2023.05.21 |
| [HTML+CSS] 가상 선택자 (0) | 2023.05.19 |
| [HTML+CSS] Position (0) | 2023.05.18 |
일단 HTML로 div 태그 하나를 만들고
CSS로 가서 keyframes를 이용해 애니메이션 하나를 만든다.
from은 맨 처음 여기서부터 시작한다는 뜻으로, 애니메이션의 초기 형태를 나타낸다.
to는 애니메이션이 마쳤을 때의 최종 형태를 나타낸다.
애니메이션의 중간 형태를 나타내고 싶다면, from과 to 사이에, 50%{}를 만들어 설정하면 된다.
처음 색깔은 빨간색, 마지막 색깔은 파란색, 그리고 X축으로 100% 정도 이동하는 애니를 만들었다.
마찬가지로 CSS에서 태그의 형태를 만든다. border-radius 50%로 완전한 원을 만든다.
그리고 animation-name을 이용해 적용할 애니메이션을 넣고, 애니메이션이 실행되는 시간을 설정한다.
참고로 애니메이션이 실행되는 시간, animation-duration는 필수요소로, 이것이 없다면 애니메이션은 실행이 되지 않는다.
실행 결과, 빨간색에서 서서히 파란색으로 변하면서 x축으로 이동하는 것을 확인할 수 있다.
transform에 rotate를 추가하여 회전을 하도록 해봤다. 180deg는 180도 회전을 의미한다.
회전하는지 확인하기 위해 원형에서 사각형으로 바꿨다. 빨강에서 파랑으로 변함과 동시에 x축으로 가는 동시에..
180도로 회전을 하는 것을 확인할 수 있다.
animation-iteration-count를 해당 애니메이션을 반복하는 횟수를 설정할 수 있다. infinite는 무한히
animation-direction은 애니메이션 종료시, 처음부터 시작할지, 아님 반대방향으로 시작할지 결정한다. alternate는 되감기
animation-timing-function은 키프레임 전환 형태를 지정한다.
| [HTML+CSS] grid (0) | 2023.05.24 |
|---|---|
| [HTML+CSS] flex (0) | 2023.05.23 |
| [HTML+CSS] 가상 선택자 (0) | 2023.05.19 |
| [HTML+CSS] Position (0) | 2023.05.18 |
| [HTML+CSS] 블록과 인라인 (0) | 2023.05.17 |
:link : 방문하지 않은 링크에 스타일 적용
:visited : 방문했던 링크에 스타일 적용
:hover : 지정한 요소에 마우스 포인터를 올려놓을 때 스타일 적용
:active : 지정한 요소를 클릭했을시 스타일 적용
:focus : 지정한 요소에 초점이 맞춰졌을 때 스타일 적용(마우스 올려짐, tab으로 이동됨 등)
:target : 앵커 대상에 스타일을 적용
:disabled : 사용할 수 없는 상태일 때
:checked : 선택한 요소의 스타일 적용
:first-child : 부모 안에 있는 모든 요소 중 첫번째 자식 요소 선택
:last-child : 부모 안에 있는 모든 요소 중에서 마지막 자식 요소 선택
:nth-child(n) : 부모 안에 있는 모든 요소 중 n번째 자식 요소를 선택
먼저 html로 리스트를 만들고, CSS를 이용하여 리스트 스타일을 없애고, 글씨를 크게한다.
CSS로 가서, 각 리스트마다, 커서를 올려놓으면 마우스 포인터가 뜨게하고 색깔을 빨강으로
클릭시, 색깔을 짙은 분홍색으로 바꿔본다.
커서를 올려보니 빨간색으로 변한걸 확인할 수 있다.
마우스 클릭 버튼을 누를 시, 짙은 분홍으로 변했다.
리스트1의 태그를 a태그로 바꾸고, 방문했을 시, 폰트가 짙은 파란색으로 변하게 함.
| [HTML+CSS] flex (0) | 2023.05.23 |
|---|---|
| [HTML+CSS] 애니메이션 (0) | 2023.05.21 |
| [HTML+CSS] Position (0) | 2023.05.18 |
| [HTML+CSS] 블록과 인라인 (0) | 2023.05.17 |
| [HTML] Form과 Input 태그 (2) (0) | 2023.05.16 |
CSS를 이용하여 문서상의 요소를 배치하는 방법, Top, Bottom, Right, Left를 통해 요소의 위치 결정
static : 기준없음 (배치 불가능/기본값)
relative : 요소 자기 자신을 기준으로 배치
absolute : 부모 요소를 기준으로 배치
fixed : 뷰포트 기준으로 배치
stickey : 스크롤 영역 기준으로 배치
먼저 HTML로 부모상자와 자식상자를 만든다. 그리고 CSS로 부모상자와 자식상자의 특징을 생성한다.
부모 상자의 크기는 200px의 검은색 줄 정사각형, 자식상자는 80px 파란색 줄 정사각형
position : relative;를 통해 부모상자가 기준이 되게 한다. 그리고 자식상자는 absolute로
부모 요소를 기준으로 배치하게끔 만들었다. 그리고 bottom: 0을 설정해보면
이런식으로 자식상자가 부모상자의 밑부분에 붙어있게 하였다.
bottom: 0;은 자식상자의 밑변과, 부모상자의 밑변의 거리
만약 bottom: 10px;으로 설정했다면 부모상자의 밑변과 자식상자의 밑변은 10px만큼 떨어지게 된다.
| [HTML+CSS] 애니메이션 (0) | 2023.05.21 |
|---|---|
| [HTML+CSS] 가상 선택자 (0) | 2023.05.19 |
| [HTML+CSS] 블록과 인라인 (0) | 2023.05.17 |
| [HTML] Form과 Input 태그 (2) (0) | 2023.05.16 |
| [HTML] Form과 Input 태그 (1) (0) | 2023.05.13 |
태그를 삽입하여 요소를 삽입했을 때 혼자 한 줄(블럭)을 차지하는 요소
예) hn, div, p 등
한 줄을 차지하지 않고 자신의 공간만큼만 차지하는 요소, 박스모델의 너비와 높이를 지정 못함
예) span, img, strong
대표적인 블록 레벨인 div와 인라인 레벨인 span을 사용하였고, 둘다 폰트색깔은 흰색에 배경색은 파랑으로 설정하였다.
그러자 블록레벨인 div는 배경색이 한줄을 차지하지만, 인라인레벨인 span은 자신의 공간만큼만 배경색이 적용되었다.
블록 레벨인 div에 강제로 인라인을 적용시켜보았다. 스타일에 display: inline;을 집어넣어 보면
인라인 모델처럼 배경색이 div의 공간만큼만 적용되는걸 확인할 수 있다.
| [HTML+CSS] 애니메이션 (0) | 2023.05.21 |
|---|---|
| [HTML+CSS] 가상 선택자 (0) | 2023.05.19 |
| [HTML+CSS] Position (0) | 2023.05.18 |
| [HTML] Form과 Input 태그 (2) (0) | 2023.05.16 |
| [HTML] Form과 Input 태그 (1) (0) | 2023.05.13 |
https://studybloghcs.tistory.com/14
[HTML] Form과 Input 태그
form 페이지의 정보 전달을 위한 하나의 영역으로, submit을 통해서 다른 페이지 혹은 서버로 정보를 전달 input 정보 입력/전달을 위한 태그 form과 input을 이용해 간단한 로그인 폼 만들기 action 속성
studybloghcs.tistory.com
이전에 썼던 글을 다시 소환, Form은 페이지의 정보 전달을 위한 하나의 영역이다.
INPUT은 정보 전달을 위한 태그
오늘은 정보의 전달을 확인하는 시간을 갖도록 하겠다.
일단 폼 안에, 텍스트 input을 만들어 놓고, name 설정 (각각 a, b)
그리고 제출 input을 만든다.
그리고 form의 메서드 속성에 get을 집어넣었다.
각각의 네모박스에 1과 2를 넣고, 제출 버튼을 누르면
원했던 페이지로 이동하게 되고, 주소창에 a=1 와 b=2 가 나타난다.
정보 전달이 되었다는 것을 확인할 수 있다.
이번에는 메서드에 get이 아닌 post를 넣었다.
get과는 달리 post는 주소창에 입력했던 정보가 나타나지 않는다.
메서드로 굳이 설정하지 않아도, 기본적인 FORM의 성질. 주소창에 입력한 정보를 나타낸다.
주소창에 입력했던 정보를 나타내지 않지만, 정보는 전달된게 맞다. 아이디, 비밀번호같은 민감한 정보를
전달할 경우에 주로 사용되고, textarea태그를 사용할 때 처럼 입력한 값이 길 경우에도 사용된다.
| [HTML+CSS] 애니메이션 (0) | 2023.05.21 |
|---|---|
| [HTML+CSS] 가상 선택자 (0) | 2023.05.19 |
| [HTML+CSS] Position (0) | 2023.05.18 |
| [HTML+CSS] 블록과 인라인 (0) | 2023.05.17 |
| [HTML] Form과 Input 태그 (1) (0) | 2023.05.13 |